js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡
遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下(其中.tabDel是页面加载之后新生成的元素,故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件):
上网找的解决方法大概有一下两种:
1、在用 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 });
2、在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()的语法是:
所以我就开始找其他解决问题的办法,知道后来发现在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 冒泡事件阻止
本文转载自: