jQuery防止重復(fù)綁定事件的解決方法

更新時(shí)間：2016年05月14日 13:16:01 作者：懶人

這篇文章主要介紹了jQuery防止重復(fù)綁定事件的解決方法,結(jié)合實(shí)例形式分析了jQuery的重復(fù)綁定問(wèn)題與相應(yīng)的解決方法,需要的朋友可以參考下

本文實(shí)例分析了jQuery防止重復(fù)綁定事件的解決方法。分享給大家供大家參考，具體如下：

一、問(wèn)題：

今天發(fā)現(xiàn)jQuery一個(gè)對(duì)象的事件可以重復(fù)綁定多次，當(dāng)事件觸發(fā)的時(shí)候會(huì)引起代碼多遍執(zhí)行。

下面是一個(gè)click事件被重復(fù)綁定的示例:

function reg_button_click(){
  $("#button).click(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  #重復(fù)注冊(cè)3次
  reg_button_click();
  reg_button_click();
  reg_button_click();
  #觸發(fā)的時(shí)候 出現(xiàn)3個(gè)alert
  $('#button').click();
});

二、解決方法：

對(duì)于需要重復(fù)綁定的場(chǎng)景，再事件注冊(cè)時(shí)候考慮用先unbind 再bind的方法；或者先off 再on

function reg_button_click(){
  $("#button).unbind('click').bind('click',(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  #重復(fù)注冊(cè)3次
  reg_button_click();
  reg_button_click();
  reg_button_click();
  #觸發(fā)的時(shí)候 出現(xiàn)3個(gè)alert
  $('#button').click();
});

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery操作xml技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery中parents()和parent()的區(qū)別分析
這篇文章主要介紹了jQuery中parents()和parent()的區(qū)別,具體分析了parents()和parent()的原理與用法區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-10-10
jQuery解決瀏覽器兼容性問(wèn)題案例分析
這篇文章主要介紹了jQuery解決瀏覽器兼容性問(wèn)題的方法,結(jié)合實(shí)例形式分析了針對(duì)不同瀏覽器的click事件響應(yīng)兼容性問(wèn)題,需要的朋友可以參考下
2016-04-04
jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對(duì)頁(yè)面高度計(jì)算與樣式的動(dòng)態(tài)添加及刪除技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
jquery 仿QQ校友的DIV模擬窗口效果源碼
本文使用大名頂頂?shù)膉query來(lái)實(shí)現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗(yàn)一些都是非常棒的
2010-03-03
jquery獲取tagName再進(jìn)行判斷
如果希望取到tagName后再進(jìn)行判斷，可以使用$(element).is()來(lái)實(shí)現(xiàn)
2014-05-05
jQuery實(shí)現(xiàn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。
2015-09-09
Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
仿淘寶京東多條件篩選可自行結(jié)合ajax加載，使用Jquery簡(jiǎn)單實(shí)現(xiàn)，具體如下，喜歡的朋友可以參考下
2013-08-08
基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
倒計(jì)時(shí)效果在我們的日常生活中經(jīng)常會(huì)用到，比如說(shuō)高考倒計(jì)時(shí)、元旦放假倒計(jì)時(shí)、春節(jié)放假倒計(jì)時(shí)等等，下面通過(guò)本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼，對(duì)jquery倒計(jì)時(shí)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
jQuery 各種瀏覽器下獲得日期區(qū)別
在系統(tǒng)開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)用到系統(tǒng)的當(dāng)前時(shí)間，然而我們遇到的問(wèn)題確又是各個(gè)瀏覽器返回值不同，就像典型的IE和FF瀏覽器。
2008-12-12
JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
這篇文章主要介紹了JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼，具有一定的參考價(jià)值，需要的朋友可以參考下
2016-12-12