(轉載)js(jquery)的on綁定點擊事件執行兩次的解決辦法

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

 

 

上網找的解決方法大概有一下兩種：
一、在用 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         });

 

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

本文轉載自:

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