让 jquery .on() 处理动态 html

Question

这在 jQuery 1.6.4 中对于动态 html 工作得很好：

$(".selector").die().live("click", function () {
    alert("clicked");
});

但我注意到在 jQuery 1.7.1 中 .live() 已被弃用并被 .on() 取代。如何将 .on() 与动态 html 一起使用？使用 .die().on("click", function()) 不起作用，.off().on("click", function()) 也不起作用代码>.

谢谢！

Answer 1

新的 on 方法的工作方式与 delegate 在旧版本的 jQuery 中执行此操作。您需要在祖先元素上使用它并提供选择器。由于 DOM 事件从目标冒泡，它们最终将到达您使用 on 的祖先元素。当事件到达该元素时，将检查目标以查看它是否与您的选择器匹配。如果是这样，则执行事件处理程序：

$("#someAncestor").on("click", ".selector", function() {
    //Do stuff
});

自从版本 1.4 左右添加了 delegate 以来，就不再需要使用 live 了。使用 delegate ，上面的代码片段将是：

$("#someAncestor").delegate(".selector", "click", function() {
    //Do stuff
});

delegate 和 on 比 live 效率更高，因为 live 始终将事件处理程序绑定到文档。这意味着必须测试页面上触发的每个事件，以查看它是否与选择器匹配，从而导致事件处理程序运行。使用 on 时，只有冒泡到祖先元素的事件才需要进行此检查。