jquery - jquery移动点击事件绑定两次

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 的第二个函数会触发 click 事件两次。

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

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