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

IT技术 javascript jquery
2021-01-31 01:58:22

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

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

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

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

请注意,据我所知,它似乎在做同样的事情,除了他们使用的是 live() 函数,该函数现在已弃用,jQuery 文档说要使用它,on()但无论哪种方式,为什么使用 live/on() 而不是我的第一个示例?

6个回答

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

展示:

http://jsfiddle.net/AJRw3/

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

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

是同义词

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

从某种意义上说,它只向所有具有 class 的元素添加处理程序一次elementClasselementClass例如$('<div class="elementClass" />')如果您有一个新元素,则处理程序不会绑定到该新元素上,您需要执行以下操作:

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

假设#container.elementClass的祖先

你能告诉我,我如何通过 vanilla JavaScript 处理这个问题?
2021-04-06 01:58:22

有很多答案,每个都涉及几个要点 - 希望这可以为您提供答案,并很好地解释了什么是什么以及如何使用它。

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

使用live()是 jQuery 中的旧方法;它被用来绑定事件,就像bind()一样,但它不只是在代码运行时将它们绑定到 DOM 中的元素——它还侦听 DOM 中的变化,并将事件绑定到任何未来匹配的元素。如果您正在执行 DOM 操作,并且您需要在某些元素上存在一个事件,这些元素稍后可能会被删除/更新/添加到 DOM 但在首次加载 DOM 时不存在,则这很有用。

live()现在贬值的原因是因为它执行不力。为了使用live(),您必须能够在最初的 DOM 中至少选择一个元素(我相信)。它还导致运行的函数副本绑定到每个元素 - 如果您有 1000 个元素,那就是很多复制的函数。

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

...这就是差异所在,以及每个功能存在的原因以及live()折旧的原因

虽然这个问题是关于 .click() 与 .on() 的,但这是对 .live() 和 .on() 之间区别的一个很好的描述,当有人第一次尝试替换现有的 .live() 时,这可能很难理解) 与 .on() 并在使其工作时遇到问题。它比官方文档中的解释要好得多。解释 .live() 缺陷的加分项。
2021-03-24 01:58:22
  • $("a").live()--> 它将适用于 all <a>,即使它是在调用 this 之后创建的。
  • $("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() 方法用于将事件处理程序直接附加到元素。

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

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

用 委托事件on(),即。在动态创建的对象中,您可以执行以下操作:

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

但是,on()在任何静态元素中引入委托,而不只是documentlive()那样,所以:

$("#closestStaticElement").on('click', '.close-box')
感谢您将其命名为“#closestStaticElement”,我不知道。
2021-03-29 01:58:22
$(document).on('click', '.close-box') 是完美的!
2021-04-12 01:58:22

您应该仔细阅读之间的区别livebind

简而言之,live使用事件委托,允许您绑定到现在和将来存在的元素。

相比之下,通过bind(及其快捷方式,如click)附加的处理程序将处理程序直接附加到与选择器匹配的 DOM 元素,因此只绑定到现在存在的元素。

的后果live的灵活性,性能降低,所以只有当你需要它提供的功能使用。