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