這兩天工作中遇到使用js動態加載內容,同時需要對加入的內容綁定點擊事件的,當時想想了想可以使用內聯的onclick 來實現,后來沒有這樣做,使用的是 on(‘click',function(){}) ,然而使用on方法的時候就發現,on 對同一個元素多次綁定同一個事件的時候,這個事件就會執行多次。
下面給出這種情況的實例:
$(function(){ $(".add").click(function(eve){ $(".btn-area").append("<button class='test-btn'>test button</button>"); //$(".test-btn").off("click"); $(".test-btn").on("click",function(){ console.log("test button ....."); }); });});
在點擊add按鈕的添加測試按鈕,測試按鈕綁定點擊事件,console 臺輸出一句話。
執行結果如下:
很明顯,第一個按鈕點擊之后執行了5次。
遇到這種情況需要在每次綁定事件之前,對該事件解綁,也就是 $(“.test-btn”).off(“click”); ,off方法解綁。
以上這篇Jquery on方法綁定事件后執行多次的解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答