詳解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.dhdzp.com); });
當(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.dhdzp.com"); });
這樣點(diǎn)擊新增的元素，它依然能夠觸發(fā)事件處理函數(shù)。
事件委托
live() 方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。傳遞給 live() 的事件處理函數(shù)不會(huì)綁定在元素上，而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM 樹(shù)的根節(jié)點(diǎn)上。
在我們的例子中，當(dāng)點(diǎn)擊新的元素后，會(huì)依次發(fā)生下列步驟：
1、生成一個(gè)click事件傳遞給 <div> 來(lái)處理。
2、由于沒(méi)有事件處理函數(shù)直接綁定在 <div> 上，所以事件冒泡到DOM樹(shù)上。
3、事件不斷冒泡一直到DOM樹(shù)的根節(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í)有所幫助。
相關(guān)文章
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中的一個(gè)樣式框架，可以利用jquery Theme roller 來(lái)生成自己想要的css樣式效果。我們可以利用jquery ui的一些框架來(lái)開(kāi)發(fā)出基于jquery ui css framework效果的插件來(lái)。
2010-06-06 
jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2015-09-09 
為jquery的ajaxfileupload增加附加參數(shù)的方法
這篇文章主要介紹了為jquery的ajaxfileupload增加附加參數(shù)的方法,需要的朋友可以參考下
2014-03-03 
jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03 
jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法
使用jQuery來(lái)加載一個(gè)外部的 css 文件，首先創(chuàng)建一個(gè) link 元素，并將它添加到 標(biāo)記中即可。那么基于jquery代碼如何實(shí)現(xiàn)呢？下面小編給大家介紹jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法，需要的朋友參考下吧
2016-06-06 
jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類(lèi)選擇、判斷、遍歷等等操作,非常實(shí)用的技巧,需要的朋友可以參考下
2014-09-09 
淺談jquery fullpage 插件增加頭部和版權(quán)的方法
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看
2018-03-03 
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見(jiàn)也很實(shí)用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下
2012-12-12