动态添加的列表项不受早期jquery函数的影响
提问于 2013-06-14 23:52:18
我试着做一个列表，我可以在这个列表中动态添加一个条目。
当您悬停到列表项时，颜色将变为黄色，否则颜色将为红色。添加列表项是没有问题的。如果我添加"item 6“(除了已经存在的5个项目之外)，添加没有任何问题，我甚至可以将其与其他项目排序。(使用jquery ui中的可排序)。
问题是，当我悬停时，"item 6“不会变成黄色。似乎悬停功能不会影响新添加的第6项，但它仍然会影响前5项。
你可以在http://jsfiddle.net/9uNV2/上看到它是如何工作的(没有sortable)
代码如下：
<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>如何确保"item 6“在添加为第六个元素后也会受到悬停功能的影响。因此，当鼠标悬停在它上面时，它也会变成黄色。
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-15 00:03:01
不再支持hover，您需要像这样使用mouseenter和mouseleave：
$(document).on("mouseenter", '.item', function () {
$(this).css("background-color", "yellow");
}).on("mouseleave", '.item', function () {
$(this).css("background-color", "orange");
});您需要使用委托语法，将其应用于新追加的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17118858
复制相关文章
点击加载更多
腾讯云开发者
