(转载)js(jquery)的on绑定点击事件执行两次的解决办法

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

遇到的问题：jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码以下（其中.tabDel是页面加载以后新生成的元素，故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件）：

1 $('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
2               alert('tab的索引：'+$(this).parents('.contentLi2').index());
3               var iNum1 = $(this).parents('.contentLi2').index();
4               var iNum2 = $(this).parents('.anElement').index();
5               $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6               $(this).parents('.anElement').remove();
7     });

 

 

上网找的解决方法大概有一下两种：
一、在用 on 绑定 click 事件以前，对该事件解绑，也就是

1 $('.right').off('click','.tabDel').on('click','.tabDel',function(){//删除所加 tab 节点的函数
2             // alert('tab的索引：'+$(this).parents('.contentLi2').index());
3             var iNum1 = $(this).parents('.contentLi2').index();
4             var iNum2 = $(this).parents('.anElement').index();
5             $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6             $(this).parents('.anElement').remove();
7         });

 

二、在on绑定的click事件执行以后进行解绑，用unbind()，即：

1 $('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
2             // alert('tab的索引：'+$(this).parents('.contentLi2').index());
3             var iNum1 = $(this).parents('.contentLi2').index();
4             var iNum2 = $(this).parents('.anElement').index();
5             $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6             $(this).parents('.anElement').remove();
7         });
8         $('.right .tabDel').unbind('clock');

 

然而，这也没有解决问题，我遇到的状况是这也写了以后，alert不执行了，缘由是刚才说过：‘.tabDel’是页面上后来生成的元素，不能直接绑定事件，而unbind()的语法是：

  1 $(selector).unbind(event,function) 

因此我就开始找其余解决问题的办法，知道后来发如今on绑定事件的时候没有阻止冒泡，在代码中加入 return false 阻止冒泡以后，事件正常运行了，代码以下：

1 $('.right').on('click','.tabDel',function(){//删除所加 tab 节点的函数
2            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
3            var iNum1 = $(this).parents('.contentLi2').index();
4            var iNum2 = $(this).parents('.anElement').index();
5            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
6            $(this).parents('.anElement').remove();
7            return false;
8        });

 

目前为止代码能够正常运行了，问题的元凶是冒泡，只是博主最开始找错了方向。
然而，阻止冒泡的方法并不止 return false 这一种，还有event.stopPropagation()，这两种方法是有区别的，简单来讲：
event.stopPropagation()会阻止事件往上冒泡，可是并不阻止事件自己；
return false 则是既阻止了事件往上冒泡又阻止了事件自己。
欲详细了解这两种方法的区别，请查找相关资料。

参考文章：

Js 冒泡事件阻止

本文转载自:

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡