live(type,[data],fn) | jQuery API 3.2 中文文件

返回值:jQuery live(type, [data] , fn)

概述

jQuery 給所有匹配的元素附加一個事件處理函式，即使這個元素是以後再新增進來的也有效。

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函式，而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。比如說

<body>
  <div class="clickme">Click here</div>
</body>

可以給這個元素繫結一個簡單的click事件：


$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

當點選了元素，就會彈出一個警告框。然後，想像一下這之後有另一個元素新增進來了。

$('body').append('<div class="clickme">Another target</div>');

儘管這個新的元素也能夠匹配選擇器 ".clickme" ，但是由於這個元素是在呼叫 .bind() 之後新增的，所以點選這個元素不會有任何效果。

.live() 就提供了對應這種情況的方法。如果我們是這樣繫結click事件的：

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然後再新增一個新元素：


$('body').append('<div class="clickme">Another target</div>');

然後再點選新增的元素，他依然能夠觸發事件處理函式。

事件委託

.live() 方法能對一個還沒有新增進DOM的元素有效，是由於使用了事件委託：繫結在祖先元素上的事件處理函式可以對在後代上觸發的事件作出迴應。傳遞給 .live() 的事件處理函式不會繫結在元素上，而是把他作為一個特殊的事件處理函式，繫結在 DOM 樹的根節點上。在我們的例子中，當點選新的元素后，會依次發生下列步驟：

產生一個click事件傳遞給來處理
由於沒有事件處理函式直接繫結在 <divgt; 上，所以事件冒泡到DOM樹上
事件不斷冒泡一直到DOM樹的根節點，預設情況下上面繫結了這個特殊的事件處理函式。
執行由 .live() 繫結的特殊的 click 事件處理函式。
這個事件處理函式首先檢測事件對象的 target 來確定是不是需要繼續。這個測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。
如果找到了匹配的元素，那麼呼叫原始的事件處理函式。

由於只有在事件發生時才會在上面的第五步里做測試，因此在任何時候新增的元素都能夠響應這個事件。

附加說明

.live() 雖然很有用，但由於其特殊的實現方式，所以不能簡單的在任何情況下替換 .bind()。主要的不同有：

在jQuery 1.4中，.live()方法支援自定義事件，也支援所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支援 focus 和 blue 事件了（對映到更合適，並且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支援hover（對映到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支援支援的JavaScript事件和自定義事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 並不完全支援通過DOM遍歷的方法找到的元素。取而代之的是，應當總是在一個選擇器後面直接使用 .live() 方法，正如前面例子里提到的。
當一個事件處理函式用 .live() 繫結后，要停止執行其他的事件處理函式，那麼這個函式必須返回 false。僅僅呼叫 .stopPropagation() 無法實現這個目的。

參考 .bind() 方法可以獲得更多關於事件繫結的資訊。

在jQuery 1.4.1 中，.live() 能接受多個，用空間分隔事件，在提供類似.bind()的功能。例如，我們可以「live 」同時繫結mouseover和mouseout事件,像這樣：


$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

在jQuery 1.4.3中:你可以繫結一個或多個事件型別的字串和函式的資料對映來執行他們


$("a").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

在jQuery 1.4 中，data參數可以用於把附加資訊傳遞給事件處理函式。一個很好的用處是應付由閉包導致的問題。可以參考 .bind() 的討論來獲得更多資訊。

在jQuery 1.4 中， live事件可以繫結到「context」DOM元素，而不是預設的文件的根。要設定此背景下，我們通過在一個單一的DOM元素(而不是一個jQuery集合或選擇器)使用jQuery() function's second argument。


$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});

從 jQuery 1.7 開始 ，不再建議使用 .live() 方法。請使用 .on() 來新增事件處理。使用舊版本的會員，應該優先使用 .delegate() 來替代 .live()。

參數

type,[fn] String,Function V1.3

type: 一個或多個事件型別，由空格分隔多個事件。

fn: 要從每個匹配元素的事件中反繫結的事件處理函式

type,[data],false String,Array,bool V1.4

type: 一個或多個事件型別，由空格分隔多個事件。

data: 傳遞給事件處理函式的附加參數

false: 設定為false會使預設的動作失效。

event String V1.4.3

一個或多個事件型別的字串和函式的資料對映來執行他們

示例

描述:

點選產生的p依然據有同樣的功能。

HTML 程式碼:


<p>Click me!</p>

jQuery 程式碼:


$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

描述:

阻止預設事件行為和事件冒泡，返回 false

jQuery 程式碼:


$("a").live("click", function() { return false; });

描述:

僅僅阻止預設事件行為

jQuery 程式碼:


$("a").live("click", function(event){
  event.preventDefault();
});