快捷導(dǎo)航

詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法

更新時(shí)間：2015年11月02日 10:31:25 投稿：lijiao

這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法，需要的朋友可以參考下

jQuery live()方法是給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后通過(guò)append,prepend,after等事件生成后的內(nèi)容也依然有效。
這個(gè)方法可以看做是 .bind() 方法的一個(gè)變體。使用 .bind() 時(shí)，選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù)，而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。比如說(shuō)：

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

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

復(fù)制代碼代碼如下:

$('.clickme').bind('click', function() { alert(www.dbjr.com.cn); });

當(dāng)點(diǎn)擊了元素，就會(huì)彈出一個(gè)警告框。然后，想象一下這之后有另一個(gè)元素添加進(jìn)來(lái)了。

復(fù)制代碼代碼如下:

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

盡管這個(gè)新的元素也能夠匹配選擇器 ".clickme" ，但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的，所以點(diǎn)擊這個(gè)元素不會(huì)有任何效果。
但live() 就提供了對(duì)應(yīng)這種情況的方法。如果我們是這樣綁定click事件的：

復(fù)制代碼代碼如下:

$('.clickme').live('click', function() { alert("www.dbjr.com.cn"); });

這樣點(diǎn)擊新增的元素，它依然能夠觸發(fā)事件處理函數(shù)。
事件委托
live() 方法能對(duì)一個(gè)還沒有添加進(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、由于沒有事件處理函數(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ù)。
6、這個(gè)測(cè)試是通過(guò)檢測(cè) $(event.target).closest('.clickme') 能否找到匹配的元素來(lái)實(shí)現(xiàn)的。
7、如果找到了匹配的元素，那么調(diào)用原始的事件處理函數(shù)。
8、由于只有在事件發(fā)生時(shí)才會(huì)在上面的第五步里做測(cè)試，因此在任何時(shí)候添加的元素都能夠響應(yīng)這個(gè)事件。
以上就是對(duì)jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法的詳細(xì)介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: