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

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

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

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

比方說當用戶在點擊鏈接時及想提示他們正在離開站點。

復制代碼代碼如下:

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

注意，.click()僅僅是個實現(xiàn)更一般.bind()的簡單方法，下面和上面的代碼相當于上面的實現(xiàn)。

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

然而當用戶點擊那個鏈接是，方法將不會被調用，因為那個鏈接當你將click事件綁定到頁面的所有<a>節(jié)點時還并不存在，所以我們就用.live()替換.bind()：

復制代碼代碼如下:

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

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

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

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

因為不管你在根節(jié)點內點擊了什么，根節(jié)點的.click()事件都會被觸發(fā)，當你點擊加入到根節(jié)點的任何元素時這個檢查都會發(fā)生。

所有.live() 都可以.die()
如果你知道.bind()，那么你肯定知道.unbind()。那么，.die()和.live()就是類似的關系了。為了接觸上面的綁定（不希望用戶點擊鏈接時彈出對話框），我們這么做：

復制代碼代碼如下:

$('a').die();

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
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 ); 

關于 .die()的問題
使用這些函數時，.die()方法會有一個缺點。只可以使用.live()方法中用到的元素選擇器，例如，不可以像下面這樣寫：

復制代碼代碼如下:

 
$(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()事件看起來好像是匹配到了目標選擇權并解除了.live()的綁定，但事實上，$('a.no-alert')并不存在綁定，所以jquery找不到任何綁定去去掉，就不會起作用了。
更糟的是下面這個:

復制代碼代碼如下:

 
$(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(); 

如何修復 .die()

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

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

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

您可能感興趣的文章: