解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的問題
更新時間：2017年05月24日 14:15:55 作者：fogwu
在寫ajax加載數(shù)據(jù)的時候發(fā)現(xiàn)，后面添加進(jìn)來的demo節(jié)點元素，失去了之前的點擊事件，如何解決此問題呢？下面小編給大家?guī)砹薺Query ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的解決方法，一起看看吧
在寫ajax加載數(shù)據(jù)的時候發(fā)現(xiàn)，后面添加進(jìn)來的demo節(jié)點元素，失去了之前的點擊事件。為什么點擊事件失效，我們該怎么去解決呢?
其實最簡單的方法就是直接在標(biāo)簽中寫onclick=""，但是這樣寫其實是有點low的，最好的方式還是通過給類名綁定一個click事件。
解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)事件問題的兩種解決方法，為了達(dá)到更好的演示效果，假設(shè)在某個頁面的body下有以下結(jié)構(gòu)的代碼：
<ul id="demo">
<li class="demo1">a1</li>
<li class="demo1">a2</li>
<li class="demo1">a3</li>
</ul>
<script type="text/javascript">
$("#demo").click(function(){
$("#demo").append('<li class="demo1">aaa4</li>'); //動態(tài)像ul的末尾追加一個新元素
});
</script>
方法一：使用live：
live()函數(shù)會給被選的元素綁定上一個或者多個事件處理程序，并且規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。通過live()函數(shù)適用于匹配選擇器的當(dāng)前及未來的元素。比如，通過腳本動態(tài)創(chuàng)建的元素。
實現(xiàn)如下：
$('.demo1').live('click', function(){
alert('OK');
});
方法二：使用on：
可以通過on方法綁定事件，可以綁定到它的父級或者body中，實現(xiàn)如下：
$("#demo").on('click','.demol',function(){
alert('OK')
});
通過上面的兩種方法，都可以解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的問題。知道方法了，趕緊的試試吧。
以上所述是小編給大家介紹的解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要幫助大家輕松實現(xiàn)jquery選項卡切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
bind() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)。這篇文章主要介紹了jQuery中的 bind用法,需要的朋友可以參考下2017-02-02
extend()是jQuery中一個重要的函數(shù)，作用是實現(xiàn)對對象的擴(kuò)展, 它經(jīng)常用于jQuery插件的開發(fā)，jQuery內(nèi)部也使用它來擴(kuò)展屬性方法，如noConflict方法，就是用extend方法來擴(kuò)展的。下面來一起深入的再學(xué)習(xí)下jquery中extend的實現(xiàn)吧。2016-12-12
這篇文章主要介紹了使用jQuery仿蘋果官網(wǎng)焦點圖特效,非常的炫酷，需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery實現(xiàn)的簡單排序功能,結(jié)合實例形式分析了冒泡排序的原理及具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-01-01
本文主要給大家詳細(xì)介紹了jQuery過濾選擇器，包含基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器等，十分全面,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實現(xiàn)仿QQ在線客服效果的滾動層代碼,可實現(xiàn)實時讀取屏幕高度并顯示的功能,涉及jQuery響應(yīng)滾動事件及定時操作的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了一看就懂：jsonp詳解,本文用淺顯易懂的語言組織講解了什么是jsonp、jsonp怎么用、jsonp使用實例等內(nèi)容,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jquery如何撲捉回車鍵觸發(fā)的事件,需要的朋友可以參考下2014-03-03
基于jquery的文本框與autocomplete結(jié)合使用(asp.net+json)
基于jquery的文本框與autocomplete結(jié)合使用示例代碼，需要的朋友可以參考下2012-05-05