触摸事件未使用 jQuery 插件触发 AJAX——Hammer.js答案

【问题标题】：Touch event not firing AJAX using jQuery Plugin -- Hammer.js触摸事件未使用 jQuery 插件触发 AJAX——Hammer.js
【发布时间】：2014-02-22 07:41:46
【问题描述】：

我在标题中正确包含了<script src="hammer.js"></script> 和<script src="../jquery.hammer.js-master/jquery.hammer.js"></script>。

我有一个通过鼠标单击触发的 AJAX 事件（动态和相关菜单）。单击第一个菜单中的哪一个决定了下一个菜单的内容。这在台式机和笔记本电脑上运行良好，但在移动设备上却不行。在 AJAX 加载下一个菜单之前，您必须点击菜单两次。

HTML 代码：

<label> Choose a Menu:</label>
<select id="menu" name="menu" class="menu">
<option class = 'option' value = '1'>Whatsapp</option>
<option class = 'option' value = '2'>19Billion USD</option>
<option class = 'option' value = '3'>Facebook</option>
</select>
<p id = 'news'> </p>

jQuery AJAX：

$("#menu").click(function()  
{  
    var menuId = $(this).val();
    var request = $.ajax({
      url: "news.php",
      type: "POST",
      data: { id : menuId },
      dataType: "html"
    });

    request.done(function( msg ) {
      $("#news").html( msg ); 
    });
});

Hammer.js 代码：

var element = document.getElementById('menu');
var hammertime = Hammer(element).on("tap", function(event) {
var menuId = $('#menu').val();
var request = $.ajax({
  url: "news.php",
  type: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  $("#news").html( msg ); 
});
});

提前谢谢你。

【问题讨论】：

标签： javascript jquery html ajax hammer.js

【解决方案1】：

添加拖动和滑动事件。第一个选项卡可能会被识别为拖动或滑动。

请将所有触摸事件类型打印到控制台。

var hammertime = Hammer(element).on("tap drag swipe", function(event) {

【讨论】：

【解决方案2】：

我后来解决了这个问题，甚至没有使用 Hammer.js。我刚刚将.click() 更改为.change()，一切正常。

这是工作代码：

$("#menu").change(function()  
{  
var menuId = $(this).val();
var request = $.ajax({
  url: "news.php",
  type: "POST",
  data: { id : menuId },
  dataType: "html"
});

 request.done(function( msg ) {
   $("#news").html( msg ); 
 });
});

谢谢大家。

【讨论】：