給jquery動(dòng)態(tài)生成的頁(yè)面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘錄一段live簡(jiǎn)單使用方法。

更多詳情還見(jiàn)官網(wǎng) http://api.jquery.com/live/

live(type, [data],fn)

概述

jQuery給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效。

這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind()時(shí)，選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù)，而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。比如說(shuō)

Click here
 
可以給這個(gè)元素綁定一個(gè)簡(jiǎn)單的click事件：

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

當(dāng)點(diǎn)擊了元素，就會(huì)彈出一個(gè)警告框。

然后，想象一下這之后有另一個(gè)元素添加進(jìn)來(lái)了。

$('body').append('
Another target
');

盡管這個(gè)新的元素也能夠匹配選擇器".clickme" ，但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的，所以點(diǎn)擊這個(gè)元素不會(huì)有任何效果。

.live()就提供了對(duì)應(yīng)這種情況的方法。如果我們是這樣綁定click事件的：

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

然后再添加一個(gè)新元素：

$('body').append('
Another target
');

然后再點(diǎn)擊新增的元素，他依然能夠觸發(fā)事件處理函數(shù)。 

事件委托

.live()方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。

傳遞給 .live()的事件處理函數(shù)不會(huì)綁定在元素上，而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM樹的根節(jié)點(diǎn)上。在我們的例子中，當(dāng)點(diǎn)擊新的元素后，會(huì)依次發(fā)生下列步驟：

1、生成一個(gè)click事件傳遞給<div> 來(lái)處理

2、由于沒(méi)有事件處理函數(shù)直接綁定在 <div>上，所以事件冒泡到DOM樹上

3、事件不斷冒泡一直到DOM樹的根節(jié)點(diǎn)，默認(rèn)情況下上面綁定了這個(gè)特殊的事件處理函數(shù)。

4、執(zhí)行由 .live() 綁定的特殊的click 事件處理函數(shù)。

5、這個(gè)事件處理函數(shù)首先檢測(cè)事件對(duì)象的target 來(lái)確定是不是需要繼續(xù)。這個(gè)測(cè)試是通過(guò)檢測(cè) $(event.target).closest('.clickme')能否找到匹配的元素來(lái)實(shí)現(xiàn)的。

6、如果找到了匹配的元素，那么調(diào)用原始的事件處理函數(shù)。

由于只有在事件發(fā)生時(shí)才會(huì)在上面的第五步里做測(cè)試，因此在任何時(shí)候添加的元素都能夠響應(yīng)這個(gè)事件。

附加說(shuō)明

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

在jQuery 1.4中，.live()方法支持自定義事件，也支持所有的JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合適，并且可以冒泡的focusin和focusout上）。

另外，在jQuery1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery1.3.x中，只支持支持的JavaScript事件和自定義事件：click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支持通過(guò)DOM遍歷的方法找到的元素。取而代之的是，應(yīng)當(dāng)總是在一個(gè)選擇器后面直接使用 .live()方法，正如前面例子里提到的。

當(dāng)一個(gè)事件處理函數(shù)用 .live()綁定后，要停止執(zhí)行其他的事件處理函數(shù)，那么這個(gè)函數(shù)必須返回 false。 僅僅調(diào)用 .stopPropagation()無(wú)法實(shí)現(xiàn)這個(gè)目的。

參考 .bind() 方法可以獲得更多關(guān)于事件綁定的信息。

在jQuery 1.4.1中，你可以一次綁定多個(gè)事件給 .live() ，跟.bind() 提供的功能類似。

在jQuery 1.4中，data參數(shù)可以用于把附加信息傳遞給事件處理函數(shù)。一個(gè)很好的用處是應(yīng)付由閉包導(dǎo)致的問(wèn)題?？梢詤⒖?.bind()的討論來(lái)獲得更多信息。

參數(shù)

typeString     事件類型

data(可選)    Object          欲綁定的事件處理函數(shù)

fn                  Function        欲綁定的事件處理函數(shù)

示例

HTML 代碼:
 
Click me!

jQuery 代碼:
    $("p").live("click", function(){
         $(this).after("

Another paragraph!

");
    });

描述:

阻止默認(rèn)事件行為和事件冒泡，返回false

jQuery 代碼:
$("a").live("click", function() { returnfalse; });

描述:

僅僅阻止默認(rèn)事件行為

jQuery 代碼:
$("a").live("click", function(event){
    event.preventDefault();
 });

最新評(píng)論