0

我试图制作一个可以动态添加项目的列表。

当您将鼠标悬停在列表项上时，颜色会变为黄色，否则颜色将变为红色。添加列表项没有问题。如果我添加“项目 6”（除了已经存在的 5 个项目）添加没有任何问题，我什至可以将它与其他项目进行排序。（使用来自 jquery ui 的可排序）。

问题是当我悬停时“第 6 项”不会变成黄色。似乎悬停功能不会影响新添加的第 6 项，但仍会影响前 5 项。

你可以在http://jsfiddle.net/9uNV2/看到它是如何工作的 （没有排序）

代码如下：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
    $(".list").sortable()

    $(".item").hover(function(){
        $(this).css("background-color","yellow");
    },function(){
        $(this).css("background-color","orange");
    });

    $(".more").click(function(){
        $(".more").before("<div class=\"add-item\"><form action=\"\"><input class=\"new-    item\" type=\"text\" name=\"text\"><input type=\"submit\" value=\"submit\"></form></div>");
        $('.new-item').focus();
        $("form").submit(function(){
            var new_value = $(".new-item").val();
            event.preventDefault();
            $(".add-item").before("<div class=\"item\">" + new_value + "              </div>").trigger('item');
            $(".add-item").remove();
        });
    }); 
});
</script>

</head>
<body>

<div class="list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="more">Add more</div>
</div>

</body>
</html>

在添加为第 6 个元素后，如何确保“第 6 项”也受到悬停功能的影响。所以当它悬停在它上面时它也会变成黄色。

谢谢。

4

1 回答 1

1

hover不再受支持，您需要mouseenter像mouseleave这样使用：

$(document).on("mouseenter", '.item', function () {
    $(this).css("background-color", "yellow");
}).on("mouseleave", '.item', function () {
    $(this).css("background-color", "orange");
});

并且您需要使用委托语法，将其应用于新的附加元素。

示例：http: //jsfiddle.net/9uNV2/1/

参考：jQuery 是否有 .delegate('hover') 的句柄？

于 2013-06-15T00:03:00.653 回答