快捷導(dǎo)航

淺析jquery某一元素重復(fù)綁定的問題

更新時間：2014年01月03日 09:24:39 作者：

本篇文章主要是對jquery某一元素重復(fù)綁定的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

某天晚上寫代碼的時候，突然出了bug，想了很久都不知道問題出在哪里(其實是很簡單的問題，但由于我還是個菜鳥，所以不知道)。幾經(jīng)周折，這中間的過程就不提了，終于讓我在快崩潰的時候，發(fā)現(xiàn)了原因。原來是因為同一jquery元素可以重復(fù)綁定，當(dāng)使用了嵌套綁定的時候，就容易出錯。如代碼：

復(fù)制代碼代碼如下:

$('.test').bind('click',function(){ 
     $('.last').bind('click',function(){ 
          alert('nihao'); 
     }); 
}); 

<button class="test">上一級綁定</button> 
<button class="last">下一級綁定</button> 

當(dāng)我點擊第一個button時，再點擊第二個button，是沒有問題的。可如果在頁面刷新之前，點擊了多次（n次）第一個button的話，此時再點擊第二個button，就出問題了，就會彈出（n個）alert對話框。

解決辦法：在會重復(fù)綁定的元素上執(zhí)行解綁，即unbind(),如：

復(fù)制代碼代碼如下:

$('.test').bind('click',function(){ 
     $('.last').unbind('click').bind('click',function(){ 
          alert('nihao'); 
     }); 
}); 

這樣，不管點擊多少次第一個button，再點擊第二個時，只會彈出一個alert對話框。

這里再介紹兩個與bind()相關(guān)聯(lián)的，one()和live()。

one() 方法為被選元素附加一個或多個事件處理程序，并規(guī)定當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。當(dāng)使用 one() 方法時，每個元素只能運(yùn)行一次事件處理器函數(shù)。通俗的講就是只管用一次。

至于live(),引用別人講的（http://www.cnblogs.com/wujilong/articles/1866834.html）：
平時在使用jQuery進(jìn)行AJAX操作的時候，新生成的元素事件會失效，有時候不得不重新綁定一下事件，但是這樣做很麻煩。例如評論分頁后對評論內(nèi)容的JS驗證會失效等。在jQuery1.3之前有一個插件會解決這個問題http://jquery.com/ ，jQuery1.3增加了一個live()方法，下面是手冊上的說明：

jQuery 1.3中新增的方法。給所有當(dāng)前以及將來會匹配的元素綁定一個事件處理函數(shù)（比如click事件）。也能綁定自定義事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

還不支持 blur, focus, mouseenter, mouseleave, change, submit

與bind()不同的是，live()一次只能綁定一個事件。

這個方法跟傳統(tǒng)的bind很像，區(qū)別在于用live來綁定事件會給所有當(dāng)前以及將來在頁面上的元素綁定事件(使用委派的方式)。比如說，如果你給頁面上所有的li用live綁定了click事件。那么當(dāng)在以后增加一個li到這個頁面時，對于這個新增加的li，其click事件依然可用。而無需重新給這種新增加的元素綁定事件。

.live()與流行的liveQuery插件很像，但有以下幾個主要區(qū)別：

•.live 目前只支持所有事件的子集，支持列表參考上面的說明。
•.live 不支持liveQuery提供的“無事件”樣式的回調(diào)函數(shù)。.live只能綁定事件處理函數(shù)。
•.live 沒有”setup”和”cleanup”的過程。因為所有的事件是委派而不是直接綁定在元素上的。

要移除用live綁定的事件，請用die方法

用法示例：
<div class=”myDiv”></div>

jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});

如果使用javascript動態(tài)創(chuàng)建一個class為mydiv的元素，點擊元素依然會有彈出。為什么使用live后就有了呢？這是因為jquery利用了事件的冒泡機(jī)制，直接把事件綁定在了document上，然后通過event.target找出事件的來源。這跟jquery.livequery插件不一樣，jquery.livequery每20毫秒做一次檢查，如有新生成則重新綁定一次事件。

使用live當(dāng)然有利也有弊：

好處就是：元素更新時不用反復(fù)去定義事件。
壞處就是：把事件綁定在document上會在頁面上每一個元素都呼叫一次，如使用不當(dāng)會嚴(yán)重影響性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。

您可能感興趣的文章: