jQuery :append添加DOM元素绑定事件不触发

829 阅读1分钟

问题描述: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过程中遇到的一个问题,浅浅纪录一下,大家如有更好的见解可以评论留言共同学习进步!