js(jquery)的on綁定點擊事件執行兩次的解決辦法—不是事件綁定而是事件冒泡

本文博主遇到的問題：jquery中用.on()給頁面中新加的元素添加點擊事件時，點擊事件源，綁定的事件執行兩次，這裏的alert會執行兩次，相應地數組刪除也執行兩次，具體代碼如下（其中.tabDel是頁面加載之後新生成的元素，故不能用普通的$(‘.tabDel).click(function(){})的方法添加點擊事件）：

$('.right').on('click','.tabDel',function(){//刪除所加 tab 節點的函數
            alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();
            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });

上網找的解決方法大概有一下兩種：
1、在用 on 綁定 click 事件之前，對該事件解綁，也就是

$('.right').off('click','.tabDel').on('click','.tabDel',function(){//刪除所加 tab 節點的函數
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();
            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });

2、在on綁定的click事件執行之後進行解綁，用unbind()，即：

$('.right').on('click','.tabDel',function(){//刪除所加 tab 節點的函數
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();
            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
        });
        $('.right .tabDel').unbind('clock');

然而，這也沒有解決問題，我遇到的情況是這也寫了之後，alert不執行了，原因是剛纔說過：‘.tabDel’是頁面上後來生成的元素，不能直接綁定事件，而unbind()的語法是：

$(selector).unbind(event,function)

所以我就開始找其他解決問題的辦法，知道後來發現在on綁定事件的時候沒有阻止冒泡，在代碼中加入 return false 阻止冒泡之後，事件正常運行了，代碼如下：

 $('.right').on('click','.tabDel',function(){//刪除所加 tab 節點的函數
            // alert('tab的索引：'+$(this).parents('.contentLi2').index());
            var iNum1 = $(this).parents('.contentLi2').index();
            var iNum2 = $(this).parents('.anElement').index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents('.anElement').remove();
            return false;
        });

目前爲止代碼可以正常運行了，問題的元兇是冒泡，只是博主最開始找錯了方向。
然而，阻止冒泡的方法並不止 return false 這一種，還有event.stopPropagation()，這兩種方法是有區別的，簡單來說：
event.stopPropagation()會阻止事件往上冒泡，但是並不阻止事件本身；
return false 則是既阻止了事件往上冒泡又阻止了事件本身。
欲詳細瞭解這兩種方法的區別，請查找相關資料。

希望此博客對您有所幫助！

個人微信公衆號：小禾子的魔法盒子，歡迎關注！