Question

我有两个html页面index.html和groups.html每页 ul＆gt; 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，事件不会停止，您将收到两个警报。

Jquery移动点击事件绑定两次

1 个答案: