jquery之on()和click()的本质区别

之前写代码时发现动态添加的事件点击无效果,结果发现是on()和click()语法上的理解失误，在这里总结一下

举例说明：

 表结构

<button class="btn">添加</button>
<ul>
    <li>
        <button class="del">删除</button>
    </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(event,子元素,function(){})

只有子元素事件才能出发父元素的相同事件

总结:使用on才有效,click无效. 使用on可以为动态添加的元素绑定事件(必须是给动态添加元素的父元素绑定事件)

>>>>>拓展

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

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