live(type,[data],fn) · jQuery1.8.0幫助文檔

### 返回值:jQuerylive(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 樹的根節點上。在我們的例子中，當點擊新的元素后，會依次發生下列步驟： 1. 生成一個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. }); ~~~ ### 參數 #### **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(); }); ~~~