jQuery：.click() 和 .on(“click”) 的区别

在本文中，我们将介绍jQuery中的两个常用方法——.click()和.on(“click”)之间的区别。这两个方法主要用于绑定点击事件，但在具体的使用方式和效果上有一些不同。

.click()

.click()是jQuery中最常用的方法之一，用于绑定点击事件。它的语法非常简单，只需要将需要执行的代码作为参数传入即可。例如：

$("#btn").click(function(){
  alert("按钮被点击了！");
});

在这个例子中，当id为”btn”的元素被点击时，会弹出一个提示框显示”按钮被点击了！”。

.click()方法有以下几个特点：
1. 直接绑定：可以直接在元素上调用.click()方法进行事件绑定，非常方便。
2. 只对已存在的元素生效：.click()方法只对已经存在于DOM中的元素起作用。对于后期动态添加进来的元素，需要重新绑定点击事件才能生效。

.on(“click”)

.on(“click”)是另一个常用的事件绑定方法，与.click()的区别在于可以对动态添加的元素生效。与.click()方法不同，.on(“click”)方法需要传入两个参数：第一个参数指定事件类型，第二个参数是事件处理函数。例如：

$("#btn-container").on("click", "#btn", function(){
  alert("按钮被点击了！");
});

在这个例子中，当id为”btn-container”的父元素中的id为”btn”的子元素被点击时，会弹出一个提示框显示”按钮被点击了！”。

.on(“click”)方法有以下几个特点：
1. 可以对动态添加的元素生效：由于.on(“click”)方法是绑定在父元素上的，所以无论是已存在的子元素还是后期动态添加的子元素，都可以生效。
2. 适用于未来元素：.on(“click”)方法可以为尚未存在于DOM中的元素绑定点击事件。这对于使用Ajax动态加载内容或通过用户交互创建新元素的情况非常有用。

区别总结

总结起来，.click()和.on(“click”)的主要区别在于对动态添加的元素的处理上。.click()方法只对已经存在于DOM的元素生效，而.on(“click”)方法则可以对动态添加的元素生效，以及对未来元素进行事件绑定。因此，在编写中需要根据具体情况选择使用哪种方法。

总结

本文介绍了jQuery中.click()与.on(“click”)两个方法之间的区别。.click()方法适用于直接绑定已存在于DOM中的元素的点击事件，而.on(“click”)方法则适用于对动态添加的元素以及未来元素进行点击事件绑定。对于开发者来说，了解和掌握这两种方法的区别，能够更好地应对各种情况下的事件处理需求。