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

Question

<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不变色呢？

Answer 1

$("#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>

Answer 2

顶下1楼。
你给li绑定mouseenter事件的时候，li还没有插入到文档里，所以无效。
给原本就存在的元素可以直接绑定事件，给动态插入的元素一般采用on方法，楼主可以看一下jquery的on绑定方法。