为什么在()而不是click()上使用jQuery

Question

目前使用jQuery,当我需要在Click发生时做某事我会像这样做...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

我正在查看别人对项目的一些代码,他们这样做......

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

请注意,除了他们正在使用live()函数现在已经过时,并且jQuery文档说要使用on()而不是使用live/on()而不是我的第一个示例时,它似乎做了同样的事情.

Answer 1

因为您可能有动态生成的元素(例如来自AJAX调用),您可能希望使用先前绑定到同一元素选择器的相同单击处理程序,然后使用on()with selector参数"委派"click事件

展示:

http://jsfiddle.net/AJRw3/

on()click()如果您没有指定选择器,也可以是同义词:

$('.elementClass').click(function() { // code 
});

是的同义词

$('.elementClass').on('click', function() { // code
});

从某种意义上说,它只将一个处理程序添加到具有类的所有元素elementClass.elementClass例如$('<div class="elementClass" />'),如果你有一个新的来自,那么处理程序将不会绑定在那个新元素上,你需要做:

$('#container').on('click', '.elementClass', function() { // code
});

假设#container是.elementClass祖先

Answer 2

有很多答案,每个都涉及几点 - 希望这可以给你你的答案,并很好地解释什么是什么以及如何使用它.

使用click()是别名bind('click' ...).bind()在设置事件侦听器时,使用DOM原样并将该函数绑定到DOM中的每个匹配元素.也就是说,如果你使用,$('a').click(...)你将绑定提供给该代码运行时找到的DOM中每个锚标记的click事件的函数.

使用live()是jQuery中的旧方法; 它用于绑定事件,就像bind()它一样,但它不仅仅在代码运行时将它们绑定到DOM中的元素 - 它还会监听DOM中的更改并将事件绑定到任何未来匹配的元素.如果您正在进行DOM操作并且需要在某些元素上存在事件,这些元素可能会在以后删除/更新/添加到DOM但在首次加载DOM时不存在.

live()现在折旧的原因是因为实施不当.为了使用live(),你必须能够在DOM中选择至少一个元素(我相信).它还导致函数的副本运行以绑定到每个元素 - 如果你有1000个元素,那就是很多复制的函数.

该on()功能的创建是为了克服这些问题.它允许您将单个事件侦听器绑定到不会在DOM中更改的对象(因此您不能使用on()稍后将被删除/添加到DOM的元素 - 将其绑定到父对象),并且只需应用元素"过滤器",以便仅在将模板冒泡到与选择器匹配的元素时运行该函数.这意味着您只有一个存在的函数(不是一堆副本)绑定到单个元素 - 这是在DOM中添加"实时"事件的更好方法.

......这就是差异,以及为什么每个函数都存在以及为什么live()折旧.

Answer 3

• $("a").live()- >它将适用于所有<a>,即使它是在调用它之后创建的.
• $("a").click()- >只有<a>在调用之前它才会适用于所有人.(这是一个捷径bind(),并on()在1.7)
• $("a").on() - >提供附加事件处理程序所需的所有功能.(jQuery 1.7中的最新版本)

行情:

从jQuery 1.7开始,不推荐使用.live()方法.使用.on()附加事件处理程序.旧版jQuery的用户应该使用.delegate()而不是.live().
此方法提供了将委托事件处理程序附加到页面的文档元素的方法,这简化了在将内容动态添加到页面时使用事件处理程序的方法.有关详细信息,请参阅.on()方法中有关直接事件与委派事件的讨论.

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

对于早期版本,.bind()方法用于将事件处理程序直接附加到元素.

Answer 4

click()是非委托方法的快捷方式on().所以:

$(".close-box").click() === $(".close-box").on('click')

委托事件on(),即.在动态创建的对象中,您可以:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

但是,on()介绍代表团在任何静态元素,不只是document因为live()会,所以:

$("#closestStaticElement").on('click', '.close-box')