jquery - 如何将 .hover() 绑定(bind)到动态创建的 "li"元素？

Question

这个问题已经有答案了:

jQuery .on function for future elements, as .live is deprecated [duplicate] (2 个回答)

已关闭 10 年前。

我能找到的所有解决方案都建议使用 .live()方法。但从今天开始，它已被弃用。

.hover()完美适用于非动态创建的“li”元素。但是一旦我追加新的“li”.hover()根本没有被触发。

有人解决这个问题了吗？

Answer 1

根据.on() jQuery doc pages，“hover”事件已被弃用，并使用委托(delegate)事件处理，例如.on() .

相反，您需要使用 .on() 委托(delegate)事件处理与 mouseenter 和 mouseleave 以及每个事件处理程序。

例如:

$(document).on("mouseenter", "li", function() {
    // hover starts code here
});

$(document).on("mouseleave", "li", function() {
    // hover ends code here
});

在实际代码中，您将选择一个比 document 对象更接近动态 li 标记的静态父对象，以获得更好的性能。