Question

在过去，我曾经把live()的电话连接成功，例如：

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

现在，live()，bind()和delegate()已被闪亮的新on()取代。

我尝试过将live()替换为on()这似乎是显而易见的：

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

然而，当您考虑on()的工作方式时，这几乎是不明显的。这来自http://api.jquery.com/on/：

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

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

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

这可以按预期工作，但我真的很想能够像使用live()一样更清晰地链接。我错过了什么吗？

Answer 1

我相信你可以这样做：

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

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

Answer 2

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

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

因此，您需要使用.on()工作的新方式，因为它更有效。如果您使用现在使用的相同表单，则必须对动态选择器稍微重新输入，这对您来说应该没什么大不了的，或者您可以将地图作为第一个参数传递给.on()并且在一个.on()个电话中处理多个事件。有关详情，请参阅.on()中.on()的第二种形式.on()。

以下是使用{{1}}进行动态行为的the jQuery doc。

Answer 3

据我了解你的问题，你想要的东西只有live()。使用on()你需要多写一点，但如果动态添加.something，那么你还有另一个选项也可以委托事件。

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

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

jQuery：使用委托时链接（）

3 个答案: