jQuery ajax動態新增節點無法觸發點擊事件如何解決

在寫ajax載入資料的時候發現，後面加入進來的demo節點元素，失去了先前的點擊事件，如何解決此問題呢？下面小編為大家帶來了jQuery ajax動態新增節點無法觸發點擊事件的解決方法，一起看看吧，希望能幫助大家。

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

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

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

 <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>'); //动态像ul的末尾追加一个新元素
 });
 </script>

方法一：使用live：

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

實作如下：

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

方法二：使用on：

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

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

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

相關推薦：

JQuery 模擬點擊事件，自動觸發事件

##js模擬點擊事件

js動態新增點擊事件常見錯誤詳解

以上是jQuery ajax動態新增節點無法觸發點擊事件如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！