jQuery的.live()和.die() 使用介紹

更新時(shí)間：2011年09月10日 21:17:28 作者：

很多開(kāi)發(fā)者都知道jQuery的.live()方法，他們大部分知道這個(gè)函數(shù)做什么，但是并不知道是怎么實(shí)現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽(tīng)過(guò)還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識(shí)到.die()了嗎？

什么是 .live()
.live方法類(lèi)似于.bind()，除此之外，它允許你將事件綁定到DOM元素上，可以將事件綁定到DOM中還不存在的元素上，看看下面的例子：

比方說(shuō)當(dāng)用戶(hù)在點(diǎn)擊鏈接時(shí)及想提示他們正在離開(kāi)站點(diǎn)。

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

 
$(document).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 

注意，.click()僅僅是個(gè)實(shí)現(xiàn)更一般.bind()的簡(jiǎn)單方法，下面和上面的代碼相當(dāng)于上面的實(shí)現(xiàn)。

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

 
$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 

但是現(xiàn)在通過(guò)javascript添加一個(gè)鏈接到頁(yè)面。

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

$('body').append('<div><a href="...">Check it out!</a></div>');

然而當(dāng)用戶(hù)點(diǎn)擊那個(gè)鏈接是，方法將不會(huì)被調(diào)用，因?yàn)槟莻€(gè)鏈接當(dāng)你將click事件綁定到頁(yè)面的所有<a>節(jié)點(diǎn)時(shí)還并不存在，所以我們就用.live()替換.bind()：

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

 
$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 

現(xiàn)在如果你添加一個(gè)新的鏈接到頁(yè)面上，綁定就也可以運(yùn)行了。

.live() 如何工作
.live()背后神奇的地方就在于它并不將事件綁定到你選定的elements上，而實(shí)際上是綁定到了DOM樹(shù)的跟節(jié)點(diǎn)（例子中是$(document)）,而是在element中就像一個(gè)參數(shù)一樣進(jìn)行傳遞。

那么當(dāng)你點(diǎn)擊一個(gè)元素時(shí)，click事件就會(huì)在DOM樹(shù)上往上傳遞，直至到達(dá)根節(jié)點(diǎn)。這個(gè).click()事件的觸發(fā)器已經(jīng)在根節(jié)點(diǎn)被.live()創(chuàng)建。這個(gè)觸發(fā)方法將首先檢測(cè)被點(diǎn)擊的目標(biāo)看是否和.live()調(diào)用的選擇器相匹配。所以上面的例子中，會(huì)檢查點(diǎn)擊的元素是否和$('a').live()中的$('a')相匹配，如果匹配，那么綁定的方法就會(huì)執(zhí)行了。

因?yàn)椴还苣阍诟?jié)點(diǎn)內(nèi)點(diǎn)擊了什么，根節(jié)點(diǎn)的.click()事件都會(huì)被觸發(fā)，當(dāng)你點(diǎn)擊加入到根節(jié)點(diǎn)的任何元素時(shí)這個(gè)檢查都會(huì)發(fā)生。

所有.live() 都可以.die()
如果你知道.bind()，那么你肯定知道.unbind()。那么，.die()和.live()就是類(lèi)似的關(guān)系了。為了接觸上面的綁定（不希望用戶(hù)點(diǎn)擊鏈接時(shí)彈出對(duì)話(huà)框），我們這么做：

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

$('a').die();

更具體點(diǎn)，如果還有其他的事件被綁定且需要保留，例如hover或其他，可以只解除click事件綁定。

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

$('a').die('click');

再具體些，如果已經(jīng)定義了方法名，可以解除綁定指定的方法。

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

 
specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert ); 

關(guān)于 .die()的問(wèn)題
使用這些函數(shù)時(shí)，.die()方法會(huì)有一個(gè)缺點(diǎn)。只可以使用.live()方法中用到的元素選擇器，例如，不可以像下面這樣寫(xiě)：

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

 
$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die(); 

.die()事件看起來(lái)好像是匹配到了目標(biāo)選擇權(quán)并解除了.live()的綁定，但事實(shí)上，$('a.no-alert')并不存在綁定，所以jquery找不到任何綁定去去掉，就不會(huì)起作用了。
更糟的是下面這個(gè):

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

 
$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die(); 

如何修復(fù) .die()

在我下篇文章中，我將會(huì)建議一種.die()執(zhí)行的新方法，它可以提供一個(gè)向后兼容的語(yǔ)氣的行為。或許我有時(shí)間的話(huà)會(huì)去建議jQuery核心開(kāi)發(fā)團(tuán)隊(duì)在下一個(gè)release中接受我的建議并進(jìn)行修改，希望多一點(diǎn)我剛寫(xiě)的這些方法，包括可選的context參數(shù)，允許自定義事件附加的節(jié)點(diǎn)，而不是根節(jié)點(diǎn)。

如果想得到更多的信息和例子，可以查查jQuery .live() and .die().的文檔

同時(shí)注意下 .delegate() 和.undelegate()，他們可以替代.live()和.die()，它們聯(lián)系很緊密。

您可能感興趣的文章: