解決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將json轉為數(shù)據(jù)字典的實例代碼
這篇文章主要介紹了jquery將json轉為數(shù)據(jù)字典的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2016-01-01jquery ajax局部加載方法詳解(實現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05如何讓瀏覽器支持jquery ajax load 前進、后退功能
在做 ajax load 的時候,很多人都不會考慮到需要瀏覽器支持前進后退功能,本例讓瀏覽器支持jquery ajax load 前進、后退 功能,需要的朋友可以參考下2014-06-06