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

標籤：函數   cti   nts   bar   href   ext   並且   好的   append   

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

為了達到更好的示範效果，假設在某個頁面的body下有以下結構的代碼：

?

1234567891011

<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()函數適用於匹配選取器的當前及未來的元素。比如，通過指令碼動態建立的元素。

實現如下：

?

123	$(‘.liLabel‘).live(‘click‘, function(){ alert(‘OK‘);});

方法二：使用on

可以通過on方法綁定事件，可以綁定到它的父級或者body中，實現如下：

?

1234567

$("#ulLabel").on(‘click‘,‘.liLabel‘,function(){ alert(‘OK‘)});或者：$("body").on(‘click‘,‘.liLabel‘,function(){ alert(‘OK‘)});

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

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