菜单中append添加的子节点，再为其append添加子节点就出问题了，求指点

要做一个动态加载的菜单。从.ashx里加载数据，默认前台页面里只有一级节点，点击加载下一级节点，加载到第三级就有问题了，点击加载完后再点击不能收回，什么原因呢<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AppMenu_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="../Content/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#AppMenu div span").click(function() {
                // $(this).css("background", "red");
                var m_div = $(this);
                if (m_div.closest("div").children("div").text() == "") {
                    var mid = $(this).attr("id");
                    // alert(mid);
                    $.post("AppMenuExt.ashx?p=" + mid, function(data, status) {
                        if (status != "success") { alert("加载失败"); }
                        else {
                            //alert(data.toString());
                            // m_div.closest("div").children("div").css("background", "green");
                            if (data.toString() != null) {
                                m_div.closest("div").children("div").append(data.toString());
                                // m_div.closest("div").children("div").append("<span>aaaa</span>");
                                //alert(m_div.children("img").attr("src"));
                                m_div.children("img").attr("src", "./images/menu2.png");
                                new appMenu1("mid", mid);
                                //alert(mid);
                            }
                        }
                    });
                }
                else {
                    //alert("div not null");
                    if (m_div.closest("div").children("div").css("display") == "none") {
                        m_div.children("img").attr("src", "./images/menu2.png");
                        m_div.closest("div").children("div").css("display", "block");
                    }
                    else {
                        m_div.children("img").attr("src", "./images/menu1.png");
                        m_div.closest("div").children("div").css("display", "none");
                    }
                }
            });
        });
        function appMenu1(key, value) {
            $(".folder").click(function() {
                // alert("key=" + key + "|value=" + value);
                //$(this).css("background", "blue");
                var divspan = $(this);
                //alert(mid);
                if (divspan.closest("div").children().text() == "") {
                    var mid = $(this).attr("id");
                    $.post("AppMenuExt.ashx?p=" + mid, function(data, status) {
                        if (status != "success") { alert("加载失败"); }
                        else {
                            //  alert(data.toString());
                            if (data.toString().length != "") {
                                divspan.append(data.toString());
                                divspan.children("img").attr("src", "./images/menu2.png");
                                new appMenu2("mid2", mid);
                                //   alert(mid);
                                // divspan.children().live("click",appMenu2("mid2", mid));
                            }                            else {
                                // alert(divspan.children("img").attr("src"));
                                if (divspan.children("img").attr("src") == "./images/menu2.png") {
                                    divspan.children("img").attr("src", "./images/menu1.png");
                                }
                                else {
                                    divspan.children("img").attr("src", "./images/menu2.png");
                                }
                            }
                        }
                    });
                }
                else {
                    //  alert("div not null !!!!");
                    if (divspan.closest("div").children().css("display") != "block") {
                        divspan.children("img").children("src", "./images/menu2.png");
                        divspan.closest("div").children("div").css("display", "block");
                    }
                    else {
                        divspan.children("img").attr("src", "./images/menu1.png");
                        divspan.closest("div").children("div").css("display", "none");
                    }
                }
            })
        }
        function appMenu2(key, value) {
            $(".folder1").click(function() {
                // alert("key=" + key + "|value=" + value);
                //   $(this).css("background", "blue");
                var spandiv = $(this);
                //alert(mid);
                if (spandiv.closest("div").children().text() == "") {
                    var mid = $(this).attr("id");
                    $.post("AppMenuExt.ashx?p=" + mid, function(data, status) {
                        if (status != "success") { alert("加载失败"); }
                        else {
                            //  alert(data.toString());
                            if (data.toString().length != "") {
                                spandiv.append(data.toString());
                                spandiv.children("img").attr("src", "./images/menu2.png");
                                new appMenu3("mid2", mid);
                                //spandiv.children().live("click",appMenu("mid2", mid));
                            }
                            else {
                                // alert(divspan.children("img").attr("src"));
                                if (spandiv.children("img").attr("src") == "./images/menu2.png") {
                                    spandiv.children("img").attr("src", "./images/menu1.png");
                                }
                                else {
                                    spandiv.children("img").attr("src", "./images/menu2.png");
                                }
                            }
                        }
                    });
                }
                else {
                   
                }
            })
        }
         function appMenu3(key, value) {
            $(".folder2").click(function() {
            var spanspan=$(this);
             if (spanspan.find("img").attr("src") == "./images/menu2.png") {
                spanspan.find("img").attr("src", "./images/menu1.png");}
             else { spanspan.find("img").attr("src", "./images/menu2.png");} 
           })
         }             
    </script>
</head>
<body>
    <form id="form1" runat="server">
       <div id="AppMenu">
           <%var ds = SQLServerDAL.DApp_Menu.GetList(0); %>
           <%foreach (var item in ds){ if (item.MId.Length < 3){ %>
           <div>
               <span id="<%=item.MId %>"> <img src="images/menu1.png" /><%=item.MName%></span><div></div></div>
               <%}
             } %>
       </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    第三级加载完毕的点击事件你不是没添加。。
            function appMenu2(key, value) {
                $(".folder1").click(function() {
                    // alert("key=" + key + "|value=" + value);
                    //   $(this).css("background", "blue");
                    var spandiv = $(this);
                    //alert(mid);
                    if (spandiv.closest("div").children().text() == "") {
                        var mid = $(this).attr("id");
                        $.post("AppMenuExt.ashx?p=" + mid, function(data, status) {
                            if (status != "success") { alert("加载失败"); }
                            else {
                                //  alert(data.toString());
                                if (data.toString().length != "") {
                                    spandiv.append(data.toString());
                                    spandiv.children("img").attr("src", "./images/menu2.png");
                                    new appMenu3("mid2", mid);
                                    //spandiv.children().live("click",appMenu("mid2", mid));
                                }
                                else {
                                    // alert(divspan.children("img").attr("src"));
                                    if (spandiv.children("img").attr("src") == "./images/menu2.png") {
                                        spandiv.children("img").attr("src", "./images/menu1.png");
                                    }
                                    else {
                                        spandiv.children("img").attr("src", "./images/menu2.png");
                                    }
                                }
                            }
                        });
                    }
                    else {
                       //事件都没写。。
                    }
                })
            }
      

  2.   

    一开始写了，也是出问题，跟下面的例子一样:点击生成的节点会直接把这个节点隐藏了。没有实现点击加载下一级<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>    <script src="../Content/jquery-1.7.js" type="text/javascript"></script>
     
    <script type="text/javascript">
           $(function() {
            $("#first").click(function() {
                if ($(this).closest("div").children("div").text() == "") {
                    $(this).closest("div").children("div").append('<div class="second" style="background-color:yellow">aaaaaa<div></div></div>');
                    $(".second").live("click", function() {
                        if ($(this).closest("div").children("div").text() == "") {
                            $(this).closest("div").children("div").append('<div style="background-color:blue">bbbbb<div class="third"></div></div>');                        $(".third").live("click", function() {
                                if ($(this).closest("div").children("div").text() == "") {
                                    $(this).closest("div").children("div").append('<div style="background-color:blue">cccc<div></div></div>');
                                }
                                else {
                                    alert("三级节点已经有子节点");
                                    if ($(this).closest("div").children("div").css("display") != "none") {
                                        $(this).closest("div").children("div").css("display", "none");
                                    }
                                    else {
                                        $(this).closest("div").children("div").css("display", "block");
                                    }
                                }
                            })
                        }
                        else {
                            //alert("二级节点已经有子节点");
                            if ($(this).closest("div").children("div").css("display") != "none") {
                                $(this).closest("div").children("div").css("display", "none");
                            }
                            else {
                                $(this).closest("div").children("div").css("display", "block");
                            }
                        }
                    })
                }
                else {
                    //alert("一级节点已经有子节点");
                    if ($(this).closest("div").children("div").css("display")!="none") {
                        $(this).closest("div").children("div").css("display", "none");
                    }
                    else {
                        $(this).closest("div").children("div").css("display", "block");
                    }
                }
            })
        })
    </script>
    </head>
    <body>
        <div style="background-color:Red"><span id="first">111111</span><div></div></div>
        <div style="background-color:Red"><span>222222</span></div>
        <div style="background-color:Red"><span>333333</span></div>
    </body>
    </html>
      

  3.   

    已经下一级节点是包含在上一级节点中的，点击下一级节点的时候会同时触发上一级节点的事件导致隐藏下一级节点了你要阻止时间冒泡才行，而且你第三级的third样式加错地方了，加到子节点了，而不是父节点<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>    <script src="jquery-1.7.2.js" type="text/javascript"></script>
     
    <script type="text/javascript">
        $(function () {
            $("#first").click(function () {
                if ($(this).closest("div").children("div").text() == "") {
                    $(this).closest("div").children("div").append('<div class="second" style="background-color:yellow">aaaaaa<div></div></div>');
                    $(".second").live("click", function (e) {
                        e.stopPropagation();///////阻止事件冒泡
                        if ($(this).closest("div").children("div").text() == "") {
                           // $(this).closest("div").children("div").append('<div style="background-color:blue">bbbbb<div class="third"></div></div>');
    ///======>
                            $(this).closest("div").children("div").append('<div style="background-color:blue" class="third">bbbbb<div></div></div>');                        $(".third").live("click", function (e) {
                                e.stopPropagation();///////阻止事件冒泡
                                if ($(this).closest("div").children("div").text() == "") {
                                    $(this).closest("div").children("div").append('<div style="background-color:blue">cccc<div></div></div>');
                                }
                                else {
                                    alert("三级节点已经有子节点");
                                    if ($(this).closest("div").children("div").css("display") != "none") {
                                        $(this).closest("div").children("div").css("display", "none");
                                    }
                                    else {
                                        $(this).closest("div").children("div").css("display", "block");
                                    }
                                }
                            })
                        }
                        else {
                            //alert("二级节点已经有子节点");
                            if ($(this).closest("div").children("div").css("display") != "none") {
                                $(this).closest("div").children("div").css("display", "none");
                            }
                            else {
                                $(this).closest("div").children("div").css("display", "block");
                            }
                        }
                    })
                }
                else {
                    //alert("一级节点已经有子节点");
                    if ($(this).closest("div").children("div").css("display") != "none") {
                        $(this).closest("div").children("div").css("display", "none");
                    }
                    else {
                        $(this).closest("div").children("div").css("display", "block");
                    }
                }
            })
        });
    </script>
    </head>
    <body>
        <div style="background-color:Red"><span id="first">111111</span><div></div></div>
        <div style="background-color:Red"><span>222222</span></div>
        <div style="background-color:Red"><span>333333</span></div>
    </body>
    </html>