jquery的.click()点击事件为什么无效，on('click',function())如何使用？

jquery的.click()点击事件，通常都是可以正常使用的。有时选中的选择器被点击时无法触发回调函数。这是为什么呢？改成on绑定click就可以了吗？面对这样的情况，on('click',function())应该如何使用？

.click()无效的原因

$(选择器).click(fn)：当选中的选择器被点击时触发回调函数fn。

只针对与页面已存在的选择器。如果该选择器是使用append(),prepend和 after(),before() 等方法后期动态添加的，.click()无效。

on('click',function())的正确使用

改成on('click',function())就可以使用了吗？

下面示例test元素为动态添加

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

点击无效，因为通过on或click绑定的事件只对当前存在的元素有效， 即on前面的元素必须在页面加载的时候就已经存在dom里,所以后添加的类名为.test的按钮无效。

修改成下面示例

$(".login") .on('click' , '.test',function () {
$(this).parent().remove()
})

可以像这样把事件绑定到.test的父元素(.login)上（事件委托），注意父元素必须是已经存在dom里，而不是后面动态添加的。

可以直接使用$(document).on('click','要选择的元素',function(){})

 $().on()的知识点补充：

 1、$().on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

2、从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。$().delegate()是更精确的小范围的使用事件代理。$().on()结合了这三个方法的优势摒弃了劣势。

3、该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

4、阻止事件冒泡和事件委托的方法：return false。在事件的处理中，可以阻止默认事件和冒泡事件。

event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

event.stopPropagation().。在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

到此这篇关于jquery的.click()点击事件为什么无效，on('click',function())如何使用？的文章就介绍到这了,更多相关click()点击无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论