通过【事件委托】解决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()}{})  //为钙元素绑定一次事件