问题描述:jQuery动态创建一个DOM元素绑定事件时,事件不能够触发
在一个ul中动态添加li元素,并给动态添加的li绑定click事件
// 动态添加和绑定事件操作 (错误的绑定方式)
let dom = '
<li id='btn'>button</li>
'
$('ul').append(dom)
$('ul #btn').click(function(){
...
})
不能触发事件的原因,是因为append中的添加的DOM节点是在整个文档加载完成后添加的,这个时候页面不会为append方法添加的节点进行点击事件的绑定。
解决方法:通过事件委托来实现绑定事件
// 动态添加和绑定事件操作 (正确的绑定方式)
let dom = '
<li id='btn'>button</li>
'
$('ul').append(dom)
$('ul').on('click','#btn',function(){
...
})
在学习jQuery过程中遇到的一个问题,浅浅纪录一下,大家如有更好的见解可以评论留言共同学习进步!