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(){}) //为该元素绑定一次事件