Jquery on方法綁定事件后執(zhí)行多次的解決方法
這兩天工作中遇到使用js動(dòng)態(tài)加載內(nèi)容，同時(shí)需要對(duì)加入的內(nèi)容綁定點(diǎn)擊事件的，當(dāng)時(shí)想想了想可以使用內(nèi)聯(lián)的onclick 來實(shí)現(xiàn)，后來沒有這樣做，使用的是 on(‘click',function(){}) ,然而使用on方法的時(shí)候就發(fā)現(xiàn)，on 對(duì)同一個(gè)元素多次綁定同一個(gè)事件的時(shí)候，這個(gè)事件就會(huì)執(zhí)行多次。
下面給出這種情況的實(shí)例：
$(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 .....");
});
});
});
在點(diǎn)擊add按鈕的添加測(cè)試按鈕，測(cè)試按鈕綁定點(diǎn)擊事件，console 臺(tái)輸出一句話。
執(zhí)行結(jié)果如下：
很明顯，第一個(gè)按鈕點(diǎn)擊之后執(zhí)行了5次。
遇到這種情況需要在每次綁定事件之前，對(duì)該事件解綁，也就是 $(“.test-btn”).off(“click”); ，off方法解綁。
以上這篇Jquery on方法綁定事件后執(zhí)行多次的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ztree獲取選中節(jié)點(diǎn)時(shí)不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。本文給大家介紹ztree獲取選中節(jié)點(diǎn)時(shí)不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決的相關(guān)資料，對(duì)ztree獲取選中節(jié)點(diǎn)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
對(duì)于 Boxy彈出框的使用之前寫過一些文章（查看jquery.boxy基礎(chǔ)），今天主要是在解決一個(gè)需要之后，覺得值得把它記錄下來，所以就再寫一篇，主要功能是，在彈出對(duì)話框后，隔N秒后自動(dòng)隱藏，還有就是自動(dòng)跳轉(zhuǎn)2013-01-01
jQuery插件EasyUI實(shí)現(xiàn)Layout框架頁面中彈出窗體到最頂層效果(穿越iframe)
這篇文章主要介紹了jQuery插件EasyUI實(shí)現(xiàn)Layout框架頁面中彈出窗體到最頂層效果,具有穿越iframe的功能,涉及jQuery的EasyUI插件屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
在項(xiàng)目中遇到這樣的需求當(dāng)用戶點(diǎn)擊編輯時(shí)，在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點(diǎn)擊“取消”銨鈕，刪除剛剛動(dòng)態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼，一起看看吧2017-03-03
jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
jQuery實(shí)現(xiàn)右下角自動(dòng)彈出可關(guān)閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實(shí)現(xiàn)。有需要的小伙伴可以參考下。2015-05-05
超級(jí)酷和最實(shí)用的jQuery實(shí)例收集(20個(gè))
二十個(gè)超級(jí)酷和最實(shí)用的jQuery實(shí)例，對(duì)于使用和學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考與學(xué)習(xí)資料。2010-04-04
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
jQuery中的replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換功能
這篇文章主要介紹了jQuery之replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換,使用jQuery的replace()方法可以很方便地實(shí)現(xiàn)不同尺寸圖片的切換，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了EasyUI中的dataGrid的行內(nèi)編輯的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
下面一個(gè)示例為大家詳細(xì)介紹下使用jquery實(shí)現(xiàn)表格的隔行換色功能，感興趣的朋友可以參考下2015-11-11