jQuery单击功能不同的方法[重复]答案

【问题标题】：jQuery Click Function Different Methods [duplicate]jQuery单击功能不同的方法[重复]
【发布时间】：2013-06-12 06:28:03
【问题描述】：

您好，我有一个使用 jQuery 进行的 Ajax 调用，我想知道这些方法在单击时选择元素有什么区别，

第一

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

第二次

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

第三

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

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

【问题讨论】：

【解决方案1】：

根据文档：

.click()

这个方法是.on('click', handler)的快捷方式

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

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

例子：

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

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

要详细了解on() 代表如何检查this。

【讨论】：

谢谢，这是有道理的，但是$('button').on(click, function){ }); 不起作用但$(this).on('click', 'button', function){ }); 起作用有什么原因吗？
是的，因为第二个附加事件动态，第一个仅适用于创建的元素（即不是 ajax）
当然$(button) 不行。应该是$('button')。
@MitchellLayzell：事件委托。
非常感谢大家帮助我澄清这一点，非常感谢！

【解决方案2】：

来自文档：

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

这个方法是.on('click', handler)的快捷方式

所以它是一样的：

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

$(this) 和 $('button') 之间的区别是一个范围。在第一种情况下，您有一个用于关闭元素的处理程序。在第二个中，您使用选择器意味着您在文档上为所有button 附加点击事件。

【讨论】：

【解决方案3】：

您可以使用 .on() 将事件绑定到尚不存在的元素。比如你把ajax响应放到div里面，你可以提前定义event，绑定到div，但是把trigger设置到其他元素上。

例如：

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

【讨论】：

【解决方案4】：

第一个起作用而不是其他两个起作用的原因可能是因为您在 ajax 调用之后重写按钮时重写了事件；这违背了将委托与 on() 一起使用的全部意义。使用第一个或在 ajax 调用完成后重新创建事件处理程序。

【讨论】：