解決jQuery ajax 動態新增節點無法觸發點選事件的問題
阿新 • • 發佈：2019-02-12
假設在某個頁面的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中，如下表示在id=demo下的所有類為demol的節點當點選時觸發事件。實現如下：
$("#demo").on('click','.demol',function(){
alert('OK')
});