jQuery動態生成的元素如何繫結事件
阿新 • • 發佈:2018-12-14
這段時間在寫程式碼的時候遇到一個問題,通過append()新增的節點,點選事件不起作用。當時我百思不得其解,各種找錯都沒找到錯誤的原因。後來才發現是動態生成節點的問題,還是自己沒有經驗啊。
下面來總結一下這個問題的始末,溫故而知新。
先看下click繫結事件的效果。
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
建立一個按鈕來生成新的節點p
<button>create</button>
繫結點選事件
<script>
//新增點選事件
$("p").click(function(){
$(this).text('click');
})
//建立一個新節點
$("button").click(function(){
var p ="<p>new</p>";
$("div").append(p);
})
</script>
點選第一p元素,事件生效,執行結果:
點選按鈕,生成新的節點,並點選新的節點,執行結果:
結果證明,click並沒有繫結到新的節點上。
如果需要給動態的元素繫結事件,需要使用到on()。
$("div" ).on("click","p",function(){
$(this).text('click');
})
on()方法,可以給未來的元素繫結事件
使用方法: 1、先選中動態生成元素的父元素 2、然後繫結事件 3、再選中子類
可以理解為給div下的p元素包括未來的p元素繫結click事件,這是個人認為通俗易懂的理解,詳細可以看文件的具體說明