一个简单的JS问题

Question

window.onload = function() {
    var modeId = $("#modeId").val();
    if (modeId == "") {
        modeId = 100;
    }
    //         $("#context").html(" <dl class='bitem'>" +
    //              "<dt><b>常用操作</b></dt>" +
    //             " <dd class='sitem' id='items1_1' >" +
    //                  "<ul class='sitemu'>" +
    //                    "" +
    //                    " <li><div class='items'>" +
    //                       "<div class='fllct'><a href='archives.html' target='main'>网站栏目管理</a></div>" +
    //                        "<div class='flrct'> <a href='archives.html' target='main'><img src='skin/images/frame/gtk-sadd.png' alt='创建栏目' title='创建栏目'/></a> </div>" +
    //                   "</div>" +
    //                   " </li>" +
    //                   "<li><a href='archives.html' target='main'>所有档案列表</a></li>" +
    //                 "<li>" +
    //                    " <div class='items'>" +
    //                      "  <div class='fllct'><a href='archives.html' target='main'>内容回收站</a></div>" +
    //                     " <div class='flrct'> <a href='archives.html' target='main'> </div>" +
    //                    " </div>" +
    //                   "</li>" +
    //                 "</ul>" +
    //               "</dd>" +
    //            "</dl>" +
    //            "<dl class='bitem'>" +
    //              "<dt><b>系统帮助</b></dt>" +
    //              "<dd class='sitem' id='items2_1'>" +
    //                " <ul class='sitemu'>" +
    //                 "  <li><a href='archives.html' target='_blank'>官方网站</a></li>" +
    //                   " <li><a href=archives.html'' target='_blank'>更多后台模板</a></li>" +
    //               "</ul>" +
    //              "</dd>" +
    //            " </dl>");
    $.ajax({
        type: "POST",
        url: "ajax/GetLeftMenu.ashx?modeid=" + modeId,
        dataType: 'json',
        success: function(res) {
            var h = "";
            $(res["leftMenu"]).each(function(i, left) {
                if (left.ParentID == modeId) {                    if (h != "" && h.toString().substring(h.toString().length - 5) == "</li>") {                        h += "</ul></dd></dl>";
                    }
                    h += "<dl class='bitem'><dt><b>" + left.ModeName + "</b></dt>"
                    h += "<dd class='sitem' >";
                    h += "<ul class='sitemu'>";
                }
                else {
                    h += "<li><div class='items'><div class='fllct'><a href='archives.html' target='main'>" + left.ModeName + "</a></div></div></li>";
                }
            });
            if (h.toString().substring(h.toString().length - 5) != "</dl>")
                h += "</ul></dd></dl>";
            $("#context").html(h);
        }
    });    $("#context dl dt").bind("click", function() {
        alert("sss");
        var $dlt = $(this).parent("dl");
        if ($dlt.children("dl dd").attr("class") == "sitem") {
            $("dl dd").addClass("sitem");
            $dlt.children("dl dd").removeClass("sitem");
        }
        else {
            $dlt.children("dl dd").addClass("sitem").siblings().children("dl dd").addClass("sitem");
        }
    });
} 为什么 我动态加载的数据 不会 调用 alert("sss");这个方法  
 我注释掉的内容却可以实现alert("sss"); ？？
  大家帮忙看下 

Answer 1

估计是运行错误，这个很难看出来了建议开发js程序，安装火狐浏览器+firebug，可以调试js脚本

Answer 2

$.ajax({
                type: "POST",
                url: "ajax/GetLeftMenu.ashx?modeid=" + modeId,
                dataType: 'json',
                success: function(res) {
                    var h = "";
                    $(res["leftMenu"]).each(function(i, left) {
                        if (left.ParentID == modeId) {                            if (h != "" && h.toString().substring(h.toString().length - 5) == "</li>") {                                h += "</ul></dd></dl>";
                            }
                            h += "<dl class='bitem'><dt><b>" + left.ModeName + "</b></dt>"
                            h += "<dd class='sitem' >";
                            h += "<ul class='sitemu'>";
                        }
                        else {
                            h += "<li><div class='items'><div class='fllct'><a href='archives.html' target='main'>" + left.ModeName + "</a></div></div></li>";
                        }
                    });
                    if (h.toString().substring(h.toString().length - 5) != "</dl>")
                        h += "</ul></dd></dl>";
                    $("#context").html(h);
                    //ajax成功后才调用事件绑定方法
                    BindContext()
                }
            });
        }
        function BindContext() {
            $("#context dl dt").bind("click", function() {
                alert("sss"); 
                var $dlt = $(this).parent("dl");
                if ($dlt.children("dl dd").attr("class") == "sitem") {
                    $("dl dd").addClass("sitem");
                    $dlt.children("dl dd").removeClass("sitem");
                }
                else {
                    $dlt.children("dl dd").addClass("sitem").siblings().children("dl dd").addClass("sitem");
                }
            });
        }
把事件绑定作为一个方法，然后ajax中调用

Answer 3

你需要为你动态加载的 dt 执行 $("#context dl dt").bind("click", function() { 语句

Answer 4

楼主动态加载的数据是不是绑定click 的时候使用$("#context dl dt").live 啊？

Answer 5

  我把哪个事件写在 外面了  所以没的结果 放在  $("#context").html(h);
就可以了