首頁 > web前端 > js教程 > 主體

解決jquery中動態新增的元素節點無法觸發事件問題的兩種方法_jquery

WBOY
發布: 2016-05-16 15:34:27
原創
1338 人瀏覽過

例如做一個ajax讀取留言列表的時候,每條留言後面有個回复按鈕,class為“reply”,如果你用的是$(".reply").click(function(){ // do something... }),想必後面透過ajax載入進來的清單中的回覆按鈕,點擊事件會失效。

其實最簡單的方法就是直接在標籤中寫onclick="",但是這樣寫其實是有點low的,最好的方式還是透過給類別名稱綁定一個click事件。

解決jquery中動態新增的元素節點無法觸發事件的問題有兩種解決方法,如下:

為了達到更好的簡報效果,假設在某頁的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>'); //动态像ul的末尾追加一个新元素
});
</script>
登入後複製

方法一:使用live

live()函數會給被選的元素綁定上一個或多個事件處理程序,並且規定當這些事件發生時運行的函數。透過live()函數適用於匹配選擇器的當前及未來的元素。例如,透過腳本動態建立的元素。

實作如下:

$('.liLabel').live('click', function(){
 alert('OK');
});
登入後複製

方法二:使用on

可以透過on方法綁定事件,可以綁定到它的父級或body中,實作如下:

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者:
$("body").on('click','.liLabel',function(){
 alert('OK')
});
登入後複製

現在大家可以嘗試嘗試,是不是問題已經解決了,希望這篇文章能真正的幫助大家。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板