javascript - jQuery 使用 live() 或 on() 高亮显示匹配的元素

Question

在我的 jsFiddle例如，你能看到我制作了一个按钮，我在其中添加了一些元素和链接以删除这些元素。在此示例中，它不是要删除元素，而是悬停通过单击按钮创建的(删除)链接，以便突出显示具有相同“数字”属性的元素。

我尝试使用 live(); 和 on(); ，但它没有做任何事情，因为这些元素是在构建页面之后制作的.

我现在更喜欢使用 on(); 因为 jQuery 说:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

我的 jQuery 代码:

    function numbers() {
        return $('#links span').length;
    }

    $('#add').on('click', function () {
        $('#links').append('<span number="' + (numbers() + 1) + '">Remove element ' + (numbers() + 1) + '</span><br />');
        $('#elements').append('<div number="' + numbers() + '" class="element">Element ' + numbers() + '</div>');
    });

    $('#links span').live('hover', function () {
        var number = $(this).attr('number');
        if ($('#elements .element').attr('number') == number) {
            $(this).addClass('highlight');
        }

});

Answer 1

首先，您应该动态绑定(bind)事件，因为元素是动态添加的。其次，您应该使用 mouseenter 和 mouseleave 事件，因为您想要切换突出显示并且需要知道光标何时离开元素。第三，我建议使用 data--attributes 而不是名为 number 的自定义属性。

function numbers() {
    return $("#links span").length;
}

$("#add").on("click", function () {
    var number = numbers() + 1;
    $("#links").append("<span data-number='" + number + "'>Remove element " + number + "</span><br />");
    $("#elements").append("<div data-number='" + number + "' class='element'>Element " + number + "</div>");
});

// Dynamically bind mouseenter and mouseleave events, so they also apply to dynamically added elements
$("body").on("mouseenter", "#links span", function () {
    var number = $(this).data("number");
    $(".element[data-number='" + number + "']").addClass("highlight");
}).on("mouseleave", "#links span", function () {
    var number = $(this).data("number");
    $(".element[data-number='" + number + "']").removeClass("highlight");
});

FIDDLE