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     });

上網找的解決方法大概有一下兩種：

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()的文法是：

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 冒泡事件阻止

本文轉載自: