Jquery移动点击事件绑定两次

Question

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

我将click事件放在一个单独的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,则事件不会停止,您将收到两个警报.