javascript - jquery中何时使用on()和click()

Question

这个问题已经有答案了:

Difference between .on('click') vs .click() (13 个回答)

已关闭 9 年前。

jquery 中使用 on() 和 click() 有什么区别？

例如:两者的工作方式相同:

    $(".classname").click( function() {
       var toAdd = $('input[name=checkListItem]').val();
    });

    $(".classname").on("click", function () {
    var toAdd = $('input[name=checkListItem]').val();
    });

什么时候应该使用.on()，什么时候使用click()。如果两者相同应该使用哪一个？

Answer 1

上面使用的语法是相同的...... .click() 是 .on() 调用的快捷方式

不同之处在于，当您使用仅 .on() 支持的事件委托(delegate)语法时

例如:

$(document).on("click", ".classname", function () {
    var toAdd = $('input[name=checkListItem]').val();
});

当您使用您使用的语法时，它只会将处理程序注册到执行代码时存在的那些元素，如果稍后添加具有相同类的新元素，则不会触发处理程序单击该按钮。

事件委托(delegate)是这个问题的解决方案...这里我们将处理程序注册到父元素，该元素将出现在 dom 中，并带有作为第二个参数传递的过滤条件...当事件冒泡到父元素时它根据过滤器选择器测试目标及其祖先，如果满足，则处理程序将被执行。