jQuery点击功能不同方法

jQuery Click Function Different Methods

本文关键字：方法 功能 jQuery      更新时间：2023-09-26

嗨，我用jQuery做了一个Ajax调用，我想知道在点击时选择元素的这些方法有什么区别，

首先

$(this).on('click', 'button', function (){ });

第二

$('button').on('click', function (){ });

3 

$('button').click(function { });

我的Ajax调用从我的数据库中选择新数据，并在成功上更新内容，并从一个数据对象更改数据，我有一个ID的按钮，第一个工作，但第二个和第三个一次都只工作一次，然后它失败了，我想知道为什么，提前感谢很多!

根据文档:

.click()

这个方法是。on('click'， handler)的快捷方式

正如您在示例中所展示的，它们几乎是相同的，但是您应该使用on()方法，因为它允许您动态委托。

.on()方法将事件处理程序附加到当前选定的集合jQuery对象中的元素。从jQuery 1.7开始，.on()方法提供附加事件处理程序所需的所有功能。

的例子:

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

该代码将触发该表中创建的所有元素的警报，另外，如果您发出AJAX请求并将它们附加到同一表中，它们的事件处理程序将被动态附加。

了解on()代表如何检查此

From documentation:

$('button').click(function { });

这个方法是。on('click'， handler)的快捷方式

和

是一样的
$('button').on('click', function { });

$(this)和$('button')之间的差异是一个作用域。在第一种情况下，你在闭包中有一个元素的处理程序。第二，您使用选择器，这意味着您为文档上的所有button附加单击事件。

您可以使用.on()将事件绑定到尚不存在的元素。例如，当您将ajax响应放入div时，您可以更早地定义事件，将其绑定到div，但将触发器设置为其他元素。

例如:

$('div').on('click','button',function(){});

第一个成功的原因&而不是其他2可能是因为你重写的事件，当你重写按钮从ajax调用后;这就违背了on()使用委托的全部意义。要么使用第一个，要么在ajax调用完成后重新创建事件处理程序。

相关文章：