解決jQuery ajax動態新增節點無法觸發點擊事件的問題

標籤：

在寫ajax載入資料的時候發現，後面添加進來的demo節點元素，失去了之前的點擊事件。為什麼點擊事件失效，我們該怎麼去解決呢?

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

解決jQuery ajax動態新增節點無法觸發事件問題的兩種解決方案，為了達到更好的示範效果，假設在某個頁面的body下有以下結構的代碼：

 

 1 <ul id="demo"> 2  <li class="demo1">a1</li> 3  <li class="demo1">a2</li> 4  <li class="demo1">a3</li> 5 </ul> 6   7 <script type="text/javascript"> 8 $("#demo").click(function(){ 9  $("#demo").append(‘<li class="demo1">aaa4</li>‘); //動態像ul的末尾追加一個新元素10 });11 </script>

方法一：使用live：

live()函數會給被選的元素繫結上一個或者多個事件處理常式，並且規定當這些事件發生時啟動並執行函數。通過live()函數適用於匹配選取器的當前及未來的元素。比如，通過指令碼動態建立的元素。

實現如下：

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

 

方法二：使用on：

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

$("#demo").on(‘click‘,‘.demol‘,function(){ alert(‘OK‘)});

通過上面的兩種方法，都可以解決jQuery ajax動態新增節點無法觸發點擊事件的問題。知道方法了，趕緊的試試吧。

來源：http://www.shuchengxian.com/Article/info/id/228.html

解決jQuery ajax動態新增節點無法觸發點擊事件的問題