jquery移动点击事件绑定两次答案

【问题标题】：Jquery mobile click event binding twicejquery移动点击事件绑定两次
【发布时间】：2012-08-21 17:55:28
【问题描述】：

我有两个 html 页面一个 index.html 和 groups.html 每个页面作为 ul > li > a 列表具有不同的类名。

我已将点击事件放在单独的 js 文件中，如下所示：

// Index Page Onclick events

  $('body').on('click','.menuClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);        
  });

// click on groups html  >>  this page alert fires twice

$('body').on('click','.grpClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);

});

脚本文件在两个 html 文件中加载，groups.html 的第二个函数会触发两次点击事件。

有没有什么办法可以避免或者有什么更好的方法来达到同样的效果？

【问题讨论】：

您是否尝试过将这 2 个选择器合并为 1 个，因为它们目前基本上是一样的？您使用的是 AJAXed 导航还是非 AJAXed 导航？
另外，如果您使用 jQuery Mobile，您可能希望绑定到 vclick，因为这是一个跨平台工作的标准化虚拟事件，而 click 在某些平台上可能无法工作
@ZathrusWriter : 感谢vlick 我知道我可以使用选择器，但最终会有 n 个页面，所以给我 n 个选择器.. 寻找一种优雅的方式来实现同样的目标。

标签： jquery jquery-mobile

【解决方案1】：

使用stopImmediatePropagation()，它会阻止事件在页面的DOM中冒泡：

// Index Page Onclick events

  $('body').on('click','.menuClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);        
  });

// click on groups html  >>  this page alert fires twice

$('body').on('click','.grpClass',function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var menuid = $(this).attr('id');
    alert(menuid);

});

以下是其工作原理的示例：JSFIDDLE。如果单击test1，则会阻止冒泡，并且只显示一个警报。如果您点击test2，事件不会停止，您会收到两个警报。

【讨论】：

ha :) 完美我说 :) ..谢谢！！1