之前就一直受這個問題的困擾，在寫ajax載入資料的時候發現，後面追加進來的demo節點元素，失去了之前的點選事件。為什麼點選事件失效，我們該怎麼去解決呢?那麼，我們通過下面的示例簡單說明。

示例如下：

<div>
  <ul id="demo">
    <li>Kubernetes：下一代分散式系統的護戒使者</li>
    <li>機器學習工具--Pandas cheat sheet</li>
    <li>Android 8.0 正式版即將釋出 谷歌還要建超人模型</li>
    ...
    //li是動態生成
  
 
</ul>
</div>

<script type="text/javascript">
    //動態像ul的末尾追加一個新元素
    $("#demo").append('<li>Kubernetes：下一代分散式系統的護戒使者</li>'); 
    $("#demo").append('機器學習工具--Pandas cheat sheet'); 
    $("#demo").append('Android 8.0 正式版即將釋出 谷歌還要建超人模型'); 
    ...
</script>

錯誤示範：

// 示範一
$("#demo li").click(function
 
(){
    alert($(this).html());
});
// 示範二
$("#demo li").on('click',function(){
    alert($(this).html());
});


//示範三
 $("#picture_delete").on("click",function(){
     $(this).parent().remove()
});

//示範四
$("#picture_delete").click(function(){
     $(this).parent().remove()
});

通過執行以上程式碼，就會發現動態生成的標籤事先繫結的點選事件點選了沒反應。總結一下,推測上面這個監聽函式，是在網頁載入的時候就指定了物件,而通過程式碼追加，如通過js追加的元素，是不能匹配這個事件的。那麼，我們應該使用什麼來繫結動態元素呢，支援給動態元素和屬性繫結事件的是live和on，其中live在JQUERY 1.7之後就不推薦使用了。現在主要用on，使用on的時候也要注意，on前面的元素也必須在頁面載入的時候就存在於dom裡面。動態的元素或者樣式等，可以放在on的第二個引數裡面。

正確示範：

//示範一
$("#demo").on('click', 'li',function(){
    alert($(this).html());
});

//示範二
 $('body').on('click', '#picture_delete', function () {
     $(this).parent().remove();
 })