jQuery使用live()或on()突出显示匹配的元素

Question

在我的jsFiddle示例中,您可以看到我创建了一个按钮,我添加了一些元素和链接来删除这些元素.在此示例中,它不是要删除元素,而是悬停通过单击按钮创建的(删除)链接,以便突出显示具有相同"number"属性的元素.

我曾尝试使用live();和on();它,但它不会做任何事情,因为项目正在建设的页面后作出的.

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

从jQuery 1.7开始,不推荐使用.live()方法.使用.on()附加事件处理程序.旧版jQuery的用户应该使用.delegate()而不是.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

首先,您应该动态绑定事件,因为元素是动态添加的.其次,您应该使用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");
});

小提琴