Jquery on方法綁定事件后執(zhí)行多次的解決方法
更新時間：2016年06月02日 11:04:03 投稿：jingxian
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
這兩天工作中遇到使用js動態(tài)加載內(nèi)容，同時需要對加入的內(nèi)容綁定點擊事件的，當時想想了想可以使用內(nèi)聯(lián)的onclick 來實現(xiàn)，后來沒有這樣做，使用的是 on(‘click',function(){}) ,然而使用on方法的時候就發(fā)現(xiàn)，on 對同一個元素多次綁定同一個事件的時候，這個事件就會執(zhí)行多次。
下面給出這種情況的實例：
$(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 臺輸出一句話。
執(zhí)行結(jié)果如下：
很明顯，第一個按鈕點擊之后執(zhí)行了5次。
遇到這種情況需要在每次綁定事件之前，對該事件解綁，也就是 $(“.test-btn”).off(“click”); ，off方法解綁。
以上這篇Jquery on方法綁定事件后執(zhí)行多次的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery CSS3自定義美化Checkbox實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jQuery CSS3自定義美化Checkbox實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
對元素進行拖動排序的實現(xiàn)方法有很多，在本文為大家介紹下使用jquery來完成這個工作，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡單實例形式分析了該插件用于顯示提示信息的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要給大家詳細介紹了jQuery.each使用方法及源碼分析的相關資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jQuery中:lt選擇器用法,實例分析了:lt選擇器的功能、定義及匹配小于指定索引值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery學習筆記(1)--用jQuery實現(xiàn)異步通信(用json傳值)具體思路
這是一個簡單的POST 請求功能以取代復雜 $.ajax,請求成功時可調(diào)用回調(diào)函數(shù),感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
jquery實現(xiàn)商品sku多屬性選擇功能（商品詳情頁）
這篇文章主要介紹了jquery實現(xiàn)商品sku多屬性選擇功能（商品詳情頁）,文中簡單給大家介紹了sku的概念，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了jQuery獲取DOM節(jié)點的方法,提供了兩種jQuery獲取DOM節(jié)點的技巧,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄斦劚韱胃袷交寮query.serializeJSON。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06