jquery的on绑定点击事件执行两次如何解决-js教程-PHP中文网

jquery的on绑定点击事件执行两次如何解决

小云云

发布： 2018-03-17 11:58:34

原创

2179 人浏览过

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

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

登录后复制

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

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

登录后复制

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

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

登录后复制

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

$(selector).unbind(event,function)

登录后复制

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

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

登录后复制

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