Jquery移动点击事件绑定(bind)两次

Question

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

我已将点击事件放在单独的 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 的第二个函数触发点击事件两次。

有什么方法可以避免它或有更好的方法来实现相同的目的吗？

Answer 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，事件不会停止，您将收到两个警报。