DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery的.live()和.die() 使用介紹
jQuery的.live()和.die() 使用介紹
編輯:JQuery特效代碼     
什麼是 .live()
.live方法類似於.bind(),除此之外,它允許你將事件綁定到DOM元素上,可以將事件綁定到DOM中還不存在的元素上,看看下面的例子:

比方說當用戶在點擊鏈接時及想提示他們正在離開站點。
代碼如下:
$(document).ready( function() {
$('a').click( function() {
alert("You are now leaving this site");
return true;
});
});

注意,.click()僅僅是個實現更一般.bind()的簡單方法,下面和上面的代碼相當於上面的實現。
代碼如下:
$(document).ready( function() {
$('a').bind( 'click', function() {
alert("You are now leaving this site");
return true;
});
});

但是現在通過javascript添加一個鏈接到頁面。
代碼如下:
$('body').append('<div><a href="...">Check it out!</a></div>');

然而當用戶點擊那個鏈接是,方法將不會被調用,因為那個鏈接當你將click事件綁定到頁面的所有<a>節點時還並不存在,所以我們就用.live()替換.bind():
代碼如下:
$(document).ready( function() {
$('a').live( 'click', function() {
alert("You are now leaving this site");
return true;
});
});

現在如果你添加一個新的鏈接到頁面上,綁定就也可以運行了。

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

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

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

所有.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()執行的新方法,它可以提供一個向後兼容的語氣的行為。或許我有時間的話會去建議jQuery核心開發團隊在下一個release中接受我的建議並進行修改,希望多一點我剛寫的這些方法,包括可選的context參數,允許自定義事件附加的節點,而不是根節點。

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved