使用jQuery on()方法绑定动态添加的元素

本文最后更新于:2020年7月4日 晚上

关于 jQuery on() 方法的 API 文档:https://api.jquery.com/on/

.on( events [, selector ] [, data ], handler )

网页往往需要根据服务器返回的数据动态的添加HTML元素,但是动态添加的HTML元素用常规方法绑定事件往往没有效果。

可以使用 jQuery 的 on() 方法进行动态绑定,使用起来很简单,网上也有很多这个方法的使用说明,但是我觉得网上的都没有把最重要的问题说清楚。

实际使用的代码大概是这样的:

$("#parent").on("click", "#child", function(){
	......
}

其中最重要的是两个选择器 $("#parent")"#child"

前面的选择器是选择一个父元素,注意是要动态添加的元素的父元素,我的理解是,只要能保证这个父元素不受动态添加的元素的影响即可,比如说你可以直接将其设置为 $("body")

后面的 "#child" 才是要绑定事件的元素,比如说动态添加了一个 <button id="btn">确定</button> 按钮,要绑定这个动态添加的 button 的点击事件,就应该将后面的选择器设置为 "#btn"