解決jQuery 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)文章
jQuery EasyUI 開源插件套裝 完全替代ExtJS
JQuery愛好者們的福音 jQuery EasyUI 開源插件套裝 完全替代ExtJS(引用)2010-03-03有關(guān)jQuery中parent()和siblings()的小問題
本文通過一個實例給大家介紹有關(guān)parent()和siblings()問題原因及解決方案,非常不錯具有參考借鑒價值,感興趣的朋友一起看看吧2016-06-06JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
JQuery實現(xiàn)表格動態(tài)增加行,一直保持最下面有多個空白行。這樣可以避免一次增加太多行可能導(dǎo)致頁面內(nèi)容太多,反應(yīng)變慢2014-07-07基于jquery鼠標(biāo)點擊其它地方隱藏層的實例代碼
基于jquery鼠標(biāo)點擊其它地方隱藏層的實例代碼,需要的朋友可以參考下。2011-01-01jQuery插件HighCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D面積圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制2D面積圖的相關(guān)步驟與屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery中DOM節(jié)點的刪除方法總結(jié)(超全面)
這篇文章主要介紹了jQuery中DOM節(jié)點的刪除方法,文中介紹的很相信,內(nèi)容包括empty()的基本用法、remove()的有參用法和無參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別,需要的朋友可以參考借鑒。2017-01-01