之前就一直受這個問題的困擾,在寫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();
})