jQuery的.live()和.die()

不少開發者都知道jQuery的.live()方法，他們大部分知道這個函數作什麼，可是並不知道是怎麼實現的，因此用的並不那麼溫馨。並且他們卻從未聽過還有解除綁定的.live()事件的.die()方法。即便你熟悉這些，可是你意識到.die()了嗎？

什麼是 .live()

.live方法相似於.bind()，除此以外，它容許你將事件綁定到DOM元素上，能夠將事件綁定到DOM中還不存在的元素上，看看下面的例子：

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

?

1 2 3 4 5 6

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

注意，.click()僅僅是個實現更通常.bind()的簡單方法，下面和上面的代碼至關於上面的實現。

?

1 2 3 4 5 6

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

可是如今經過javascript添加一個連接到頁面。

?

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

然而當用戶點擊那個連接是，方法將不會被調用，由於那個連接當你將click事件綁定到頁面的全部<a>節點時還並不存在，因此咱們就用.live()替換.bind()：

?

1 2 3 4 5 6

$(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()就是相似的關係了。爲了接觸上面的綁定（不但願用戶點擊連接時彈出對話框），咱們這麼作：

?

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

更具體點，若是還有其餘的事件被綁定且須要保留，例如hover或其餘，能夠只解除click事件綁定。

?

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

再具體些，若是已經定義了方法名，能夠解除綁定指定的方法。

?

1 2 3 4 5 6 7 8 9 10 11 12

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()方法中用到的元素選擇器，例如，不能夠像下面這樣寫：

?

1 2 3 4 5 6 7 8 9 10

$(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找不到任何綁定去去掉，就不會起做用了。

更糟的是下面這個:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

$(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()，它們聯繫很緊密。