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

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

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

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

$('.clickme').bind('click', function() { alert(m.fzitv.net); });

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

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

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

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

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

$('.clickme').live('click', function() { alert("m.fzitv.net"); });

這樣點(diǎn)擊新增的元素，它依然能夠觸發(fā)事件處理函數(shù)。
事件委托
live() 方法能對一個(gè)還沒有添加進(jìn)DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應(yīng)。傳遞給 live() 的事件處理函數(shù)不會(huì)綁定在元素上，而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點(diǎn)上。
在我們的例子中，當(dāng)點(diǎn)擊新的元素后，會(huì)依次發(fā)生下列步驟：
1、生成一個(gè)click事件傳遞給 <div> 來處理。
2、由于沒有事件處理函數(shù)直接綁定在 <div> 上，所以事件冒泡到DOM樹上。
3、事件不斷冒泡一直到DOM樹的根節(jié)點(diǎn)，默認(rèn)情況下上面綁定了這個(gè)特殊的事件處理函數(shù)。
4、執(zhí)行由 .live() 綁定的特殊的 click 事件處理函數(shù)。
5、這個(gè)事件處理函數(shù)首先檢測事件對象的 target 來確定是不是需要繼續(xù)。
6、這個(gè)測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實(shí)現(xiàn)的。
7、如果找到了匹配的元素，那么調(diào)用原始的事件處理函數(shù)。
8、由于只有在事件發(fā)生時(shí)才會(huì)在上面的第五步里做測試，因此在任何時(shí)候添加的元素都能夠響應(yīng)這個(gè)事件。
以上就是對jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法的詳細(xì)介紹，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05

jQuery調(diào)用Webservice傳遞json數(shù)組的方法

這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實(shí)例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

2016-08-08

Jquery ui css framework

Jquery ui css framework是jquery ui中的一個(gè)樣式框架，可以利用jquery Theme roller 來生成自己想要的css樣式效果。我們可以利用jquery ui的一些框架來開發(fā)出基于jquery ui css framework效果的插件來。

2010-06-06

jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實(shí)例

這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對頁面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下

2015-09-09

為jquery的ajaxfileupload增加附加參數(shù)的方法

這篇文章主要介紹了為jquery的ajaxfileupload增加附加參數(shù)的方法,需要的朋友可以參考下

2014-03-03

jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)

這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2017-03-03

jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法

使用jQuery來加載一個(gè)外部的 css 文件，首先創(chuàng)建一個(gè) link 元素，并將它添加到標(biāo)記中即可。那么基于jquery代碼如何實(shí)現(xiàn)呢？下面小編給大家介紹jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法，需要的朋友參考下吧

2016-06-06