jQuery .click() 无效原因及 on('click') 事件委托详解

在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、mouseover等同为直接事件。$().live()是通过冒泡方式将事件绑定到元素上，更适合列表类型，通常绑定到document DOM节点上。$().delegate()则是更精确的小范围事件代理。$().on()结合了这三个方法的优势，并摒弃了它们的劣势。

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

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

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

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

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