Question

在我的jsFiddle示例中，您可以看到我创建了一个按钮，我添加了一些元素和链接来删除这些元素。在这个例子中，它不是要删除元素，而是悬停通过单击按钮创建的（删除）链接，以便突出显示具有相同“数字”属性的元素。

我尝试使用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- - 属性而不是名为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

jQuery使用live（）或on（）突出显示匹配的元素

1 个答案: