解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題的兩種方法
更新時間：2015年10月30日 14:36:05 投稿：lijiao
這篇文章主要分享了解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題的兩種方法，感興趣的小伙伴們可以參考一下
比如做一個ajax讀取留言列表的時候，每條留言后面有個回復按鈕，class為“reply”,如果你用的是$(".reply").click(function(){ //do something... })，想必后面通過ajax加載進來的列表中的回復按鈕，點擊事件會失效。
其實最簡單的方法就是直接在標簽中寫onclick=""，但是這樣寫其實是有點low的，最好的方式還是通過給類名綁定一個click事件。
解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件的問題有兩種解決方法，如下：
為了達到更好的演示效果，假設在某個頁面的body下有以下結構的代碼：
<p id="pLabel">新加一條</p>
<ul id="ulLabel">
<li class="liLabel">aaa1</li>
<li class="liLabel">aaa2</li>
<li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
$("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //動態(tài)像ul的末尾追加一個新元素
});
</script>
方法一：使用live
live()函數(shù)會給被選的元素綁定上一個或者多個事件處理程序，并且規(guī)定當這些事件發(fā)生時運行的函數(shù)。通過live()函數(shù)適用于匹配選擇器的當前及未來的元素。比如，通過腳本動態(tài)創(chuàng)建的元素。
實現(xiàn)如下：
$('.liLabel').live('click', function(){
alert('OK');
});
方法二：使用on
可以通過on方法綁定事件，可以綁定到它的父級或者body中，實現(xiàn)如下：
$("#ulLabel").on('click','.liLabel',function(){
alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
alert('OK')
});
現(xiàn)在大家可以嘗試嘗試，是不是問題已經得到解決了，希望這篇文章能夠真正的幫助大家。
相關文章
本文給大家分享的是個人在使用jQuery的過程中總結的5點比較重要的知識點，這里推薦給小伙伴們，有需要的童鞋可以參考下。2015-05-05
這篇文章主要介紹了jQuery圓形統(tǒng)計圖開發(fā)的方法,實例分析了circliful插件的用法與使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
目前做的這個項目中要用到用戶頭像功能，領導說最好是做成用戶上傳一個圖片后可以用圖像裁剪的方法自己選擇頭像。2009-05-05
jquery的冒泡事件的阻止與允許(三種實現(xiàn)方法)
冒泡或默認的事件發(fā)生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對你了解冒泡事件有所幫助2013-02-02
jQuery在vs2008及js文件中的無智能提示的解決方法
我通過下面方法實現(xiàn)了jQuery在VS2008及js文件中的智能提示的，希望對朋友們有所幫助。2010-12-12
用jQuery獲取table中行id和td值的實現(xiàn)代碼
下面小編就為大家?guī)硪黄胘Query獲取table中行id和td值的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
用jquery的大概有一年了，只知道$(selector)，其內部選擇器是如何實現(xiàn)并不完全不清晰，汗顏啊于是看了jquery的源碼,jquery用的選擇器的引擎是sizzle,感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
基于jquery創(chuàng)建的一個圖片、視頻緩沖的效果樣式插件
利用css和jquery創(chuàng)建一個動畫效果的緩沖樣式插件，插件可以開始、暫停、結束2012-08-08
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標題及內容摘要，而且是每次一條，有點類似csdn的滾動廣告。2009-10-10
這篇文章主要介紹了jQuery搜索子元素的方法,實例分析了children、find等方法的使用技巧,需要的朋友可以參考下2015-02-02