通过【事件委托】解决click无效的问题

<button class="btn">添加</botton>
<ul>
<li>
<button class="del">删除</botton>
</li>
<li>
<button class="del">删除</button>
</li>
</ul>

1.点击添加按钮向ul里面动态添加删除按钮

$(".btn").on('click',function(){
$("ul").append('<li><button class='del'>删除</button></li>')
//动态添加的删除按钮
})

2.点击【删除按钮】删除整个li

按照如下写法导致后添加的删除按钮无删除功能

$(".del").on('click',function(){
$(this).parent().remove()
//找到当前按钮并删除这一行，功能无效
})

原因：通过on或click绑定的事件支队当前存在的元素有效

           on前面的元素必须在页面加载的时候就已经存在在dom里，所以后添加的类名为del的按钮无效

解决方案：

$("ul").on('click','.del',function(){
$(this).parent().remove()
})

将事件绑定到类名为del的元素的父元素上（事件委托），注意元素必须是已经存在dom里而非后面动态添加的

使用on才有效，click无效，使用on可以为动态添加的元素绑定事件（必须是给动态添加元素的父元素绑定事件）

拓展：.off(event)   //解绑该元素所绑定的该事件

           .one(event,function()}{})  //为钙元素绑定一次事件

最后

以上就是紧张超短裙为你收集整理的通过【事件委托】解决click无效的问题的全部内容，希望文章能够帮你解决通过【事件委托】解决click无效的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。