jquery的on綁定點擊事件執行兩次如何解決-js教程-PHP中文網

jquery的on綁定點擊事件執行兩次如何解決

小云云

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

原創

2176 人瀏覽過

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 則是既阻止了事件往上冒泡又阻止了事件本身。
欲詳細了解這兩種方法的差別，請尋找相關資料。