jQuery中 live 方法的使用方法

2022-09-20 00:48:15 字數 2306 閱讀 7437

來自:jqueryapi-100214.chm

live(type, [data], fn)

概述jquery 給所有匹配的元素附加乙個事件處理函式,即使這個元素是以後再新增進來的也有效。

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

click here

可以給這個元素繫結乙個簡單的click事件:

$('.clickme').bind('click', function() ); 

當點選了元素,就會彈出乙個警告框。

然後,想象一下這之後有另乙個元素新增進來了。

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

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

$('.clickme').live('click', function() );
然後再新增乙個新元素:

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

事件委託

.live() 方法能對乙個還沒有新增進dom的元素有效,是由於使用了事件委託:繫結在祖先元素上的事件處理函式可以對在後代上觸發的事件作出回應。

傳遞給 .live() 的事件處理函式不會繫結在元素上,而是把他作為乙個特殊的事件處理函式,繫結在 dom 樹的根節點上。在我們的例子中,當點選新的元素後,會依次發生下列步驟:

1、生成乙個click事件傳遞給 來處理

2、由於沒有事件處理函式直接繫結在 上,所以事件冒泡到dom樹上

3、事件不斷冒泡一直到dom樹的根節點,預設情況下上面繫結了這個特殊的事件處理函式。

4、執行由 .live() 繫結的特殊的 click 事件處理函式。

5、這個事件處理函式首先檢測事件物件的 target 來確定是不是需要繼續。這個測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。

6、如果找到了匹配的元素,那麼呼叫原始的事件處理函式。

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

附加說明

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

在jquery 1.4中,.live()方法支援自定義事件,也支援所有的 j**ascript 事件。在jquery 1.4.1中,甚至也支援 focus 和 blue 事件了(對映到更合適,並且可以冒泡的focusin和focusout上)。

另外,在jquery 1.4.1中,也能支援hover(對映到"mouseenter mousele**e")。然而在jquery 1.3.x中,只支援支援的j**ascript事件和自定義事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live() 並不完全支援通過dom遍歷的方法找到的元素。取而代之的是,應當總是在乙個選擇器後面直接使用 .live() 方法,正如前面例子裡提到的。

當乙個事件處理函式用 .live() 繫結後,要停止執行其他的事件處理函式,那麼這個函式必須返回 false。 僅僅呼叫 .stoppropagation() 無法實現這個目的。 

在jquery 1.4.1中,你可以一次繫結多個事件給 .live() ,跟 .bind() 提供的功能類似。

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

引數typestring      事件型別

data (可選)     object           欲繫結的事件處理函式

fn                   function        欲繫結的事件處理函式

示例html **:

click me!

jquery **:

$("p").live("click", function());

描述:阻止預設事件行為和事件冒泡,返回 false

jquery **:

$("a").live("click", function() );

描述:僅僅阻止預設事件行為

jquery **:

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

jQuery中bind和live方法的區別

bind和live方法的作用都是為被選元素新增乙個或多個事件處理程式,並規定當這些事件發生是執行的函式 不同點是 通過live方法附加的事件處理程式適用於匹配選擇器的當前及未來元素 比如由指令碼建立的新元素 這是乙個段落。這裡把上面的live換成bind效果是一樣的,不同的是 如 1 2 3jque...

jQuery中bind和live方法的區別

bind和live方法的作用都是為被選元素新增乙個或多個事件處理程式,並規定當這些事件發生是執行的函式 不同點是 通過live方法附加的事件處理程式適用於匹配選擇器的當前及未來元素 比如由指令碼建立的新元素 這是乙個段落。這裡 把上面的live換成bind效果是一樣的,不同的是 如 1 2 3jqu...

jQuery中live 的多次重複繫結

用jquery的live 方法,會出現重複繫結事件的情況,如,當點選乙個按鈕時,此按鈕所繫結的事件會並執行n遍。解決方法是在繫結live前加上die 事件。die 是jquery1.3之後才出現的方法,與live 正好完全相反,有興趣的可以查詢jquery的api,檢視具體的介紹。於是我就在live...