jquery - 以某种方式在不使用 .on() 的情况下监听新元素

Question

我有一个简单的悬停功能，可以向 LI 添加关闭按钮。问题是，创建了新的 LI，并且悬停不再起作用。我知道.On();会监视新创建的元素，但这似乎只适用于.click().

JS：

 $("#sortable li").hover(function () {
     $(this).find(".close").show();
 },
 function () {
     $(this).find(".close").hide();
 });

Answer 1

您可以使用委托形式的事件处理，但它不适用于伪事件hover，因此您需要同时观察 mouseenter 和 mouseleave 事件。

$("#sortable").on("mouseenter", "li", function() {
    // mouse over code here
    $(this).find(".close").show();
});

$("#sortable").on("mouseleave", "li", function() {
    // write your hover out code here
    $(this).find(".close").hide();
});

或更紧凑的形式：

$("#sortable").on({
    mouseenter: function() {
        // mouse over code here
        $(this).find(".close").show();
    }, 
    mouseleave: function() {
        // mouse leave code here
        $(this).find(".close").hide();
    }
 }, "li");

它的工作方式是鼠标事件在零件链中冒泡，因此这种委托形式.on()监视#sortable父级以查找源自子li标记的事件，然后在它们与所需事件匹配时触发您的回调。

Answer 2

$('#sortable').on({
    mouseenter: function() {
            $(this).find(".close").show();
        },
    mouseleave: function() {
            $(this).find(".close").hide();
        }
}, 'li');