jQuery：使用委托时链接 on()

Posted 2023-02-21

【中文标题】jQuery：使用委托时链接 on()

【英文标题】：jQuery: Chaining on() when using delegation

【发布时间】：2012-08-05 02:34:22

【问题描述】：

在过去，我曾经成功地将电话链接到live()，例如：

$(".something")
    .live("click", function(e)  ... )
    .live("change", function(e)  ... )
    .live("submit", function(e)  ... );

如今，live()、bind() 和 delegate() 已被闪亮的新 on() 取代。

我尝试用 on() 简单地替换 live()，这似乎很明显：

$(".something")
    .on("click", function(e)  ... )
    .on("change", function(e)  ... )
    .on("submit", function(e)  ... );

但是，当您考虑 on() 的工作原理时，这几乎同样明显行不通。来自http://api.jquery.com/on/：

“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在于页面上。”

根据 jQuery 文档，我需要绑定到 document 并委托给 .something 来处理实时事件。不幸的是，这意味着如果我想用on() 复制上面的内容，我最终会重复我的委托选择器（.document）：

$(document)
    .on("click", ".something", function(e)  ... )
    .on("change", ".something", function(e)  ... )
    .on("submit", ".something", function(e)  ... );

这按预期工作，但我真的很希望能够像使用live() 那样更清晰地进行链接。我错过了什么吗？

【问题讨论】：

我相信 DELEGATE 取代了 LIVE，而 ON 只是正常赛事的“面具”。

来自 jQuery 文档：“从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。”所以它确实使 live()、bind() 和 delegate() 变得多余。

为什么投反对票？这对我来说似乎是个好问题。

jQuery API 提供的click()、change() 和submit() 函数有什么问题？

@mariusnn，他们不是“活的”

【参考方案1】：

我相信你可以做到：

$(document).on(
    "click" : function(e)  ... ,
    "change" : function(e)  ... ,
    "submit" : function(e)  ... 
, ".something");

也就是说，使用“events-map”语法来指定事件及其处理程序，然后指定用于委托样式行为的选择器。

【讨论】：

是的，你先生是赢家。 github.com/jquery/jquery/blob/1.7.2/src/event.js#L891

@nnnnnn 感谢您通过实际阅读我的问题并给出正确答案来成为真正有用的 *** 成员 :)

在回答之前彻底阅读问题的人。颁奖来了！

【参考方案2】：

据我了解，您希望得到像 live() 这样简短的内容。使用 on() 你必须多写一点，但如果 .something 是动态添加的，那么你还有另一个选项可以委托事件。

var $div = $('<div/>', 
  'class': 'something',
   click: function ()  ... ,
   change: function ()  ... 
)

// Already has events attached
// no need to delegate
$div.appendTo('body')

【讨论】：

"...that also delegates the event" - 我不认为这是委托，它只是在创建元素时直接绑定事件.

是的，我想你是对的，无论如何这是在某些情况下做同样事情的另一种方式。

【参考方案3】：

.live() 有很多问题。其中之一是当您运行代码时它正在评估选择器".something"，但随后不使用结果（例如浪费），然后在事件发生时在运行时重新评估（就像它需要为了正常工作一样)。

此外，.live() 强制所有动态事件都在 document 对象上，如果您有很多动态事件处理程序，这可能会真正减慢事件处理速度。另一方面，.on() 允许您选择一个更接近实际对象的静态父对象并将事件处理程序附加到该对象，以便可以将不同的动态事件处理程序附加到更靠近源和不同的对象，这使得当有很多事件处理程序时，它们的运行时性能要好得多。

因此，您只需要接受.on() 的新工作方式，因为它更高效。如果您使用现在使用的相同表单，您必须对动态选择器进行更多的重新输入，或者您可以将映射作为第一个参数传递给 .on() 并处理多个一个.on() 调用中的事件。请参阅the jQuery doc 中.on() 的第二种形式.on() 了解更多信息。

这是使用.on() 进行动态行为的simple explanation。

【讨论】：

$(".something", static_parent).live(...) 确实让你选择了一个静态父级，对吧？

是的：github.com/jquery/jquery/blob/1.6.4/src/event.js#L1016 我理解评估选择器的低效率，我并不是说live 比on 更好。