帮我看看这段jquery代码,错在哪里

百变猪娃娃 2013-08-25 07:14:13
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#ul_test li").remove();
$("#ul_test").append($("<li>aaaaaaaaaaa</li><li>bbbbbbbbbbbbb</li><li>cccccccccccc</li><li>ddddddddddddd</li>"));
});

$("#ul_test li").mouseenter(function() {
$(this).css("background-color", "red").siblings().css("background-color", "#ffffff");
})
});
</script>


    <input type="button" id="btn" />
<ul id="ul_test"></ul>


为何li不变色呢?
...全文
69 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿鱼 2013-08-25
  • 打赏
  • 举报
回复
顶下1楼。 你给li绑定mouseenter事件的时候,li还没有插入到文档里,所以无效。 给原本就存在的元素可以直接绑定事件,给动态插入的元素一般采用on方法,楼主可以看一下jquery的on绑定方法。
ftiger 2013-08-25
  • 打赏
  • 举报
回复
$("#ul_test li").mouseenter(function() { $(this).css("background-color", "red").siblings().css("background-color", "#ffffff"); } 这一串绑定事件的操作执行时,对象还未生成,不能直接绑定,改用on机制绑定在其父容器上。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
        $(function() {
            $("#btn").click(function() {
                $("#ul_test li").remove();
                $("#ul_test").append($("<li>aaaaaaaaaaa</li><li>bbbbbbbbbbbbb</li><li>cccccccccccc</li><li>ddddddddddddd</li>"));
            });
 
            $("#ul_test").on("mouseenter","li",function() {
                $(this).css("background-color", "red").siblings().css("background-color", "#ffffff");
            })
        });
    </script>

	<input type="button" id="btn" value="Create"/>
    <ul id="ul_test"></ul>

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧