js 为动态添加的元素绑定事件_IT百科

想必大家都有遇到过，DOM动态添加的元素，你给它绑定的事件是不起作用的。目前有两种办法，为动态添加的元素绑定事件

⚠️ 动态添加的子元素一定要放在on()方法里面，并且on()方法里面的 childSelector 必须要是 selector 的子元素，否则动态添加的元素绑定的事件依旧无效

本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下：

jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

</div>

需要给<ul>里面动态添加的<li>标签添加click事本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下：

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

</div>

需要给<ul>里面动态添加的<li>标签添加click事

使用jQuery的$(selector).on("event","child",function(){})给静态元素绑定事件是比较容易的，比如下面这行代码就是给 p 元素绑定点击事件

$("p").on("click", function () {

alert("you click the p element")

})123

但是如果是动态生成的元素，使用上面这段代码是没有效果的，因此要选择动态元素的某个父级静态元素，以此来绑定事件方可，具体见下段代码。

$(document).ready(function () {

$("button").on("click", function () {

$("#myDiv").append("<p>this is a new paragraph!</p>")

})

$(document).on("click", "#myDiv p", function () {

alert("you clicked the p element!")

})

}

)</script><body><div>

<button id="btn_add">点击动态增加元素</button></div><div id="myDiv"></div></body></html>

别的没什么说的，要注意的是各种绑定事件要写在$(doucument).ready() 中，否则无效。

欢迎分享，转载请注明来源：内存溢出

js 为动态添加的元素绑定事件