200分Jquery AJAX 输出HTML JS失效

我现在想用Jquery AJAX 在Frame中输出一个HTML，这个HTML中包括CSS和JS等文件
代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="js/jquery.js" type="text/javascript"></script>    <script type="text/javascript"><!--
        function clickDetails() {
            var strUrl = "HTMLPage.htm";
            var loadHtml = "<div style='margin: 60px auto; width: 500px;  text-align: center;'><span style='padding-top:15px; text-align:right; color:#9b9b9b;font-size:12px;'>" +
            "<img alt='load' src='script/jstree/themes/ajax-loader.gif' align='absMiddle'  bold='0'  /></span></div> ";
            $.getScript("js/JSTest.js"); 
            $.ajax({
                type: "get",
                url: strUrl,
                data: "",
                dataType: "html",
                beforeSend: function() {
                    window.frames['rightFrame'].document.body.innerHTML = loadHtml;
                   
                },
                success: function(msg) {                    window.frames['rightFrame'].document.body.innerHTML = msg;
                    //alert(msg);
                    //document.getElementById("rightFrame").src=strUrl;                }
            });
                    }// --></script></head>
<body>
    <input type="button" id="send" value="弹出页面" onclick="clickDetails()" />
    <div id="resText">
    </div>
    <iframe frameborder="0" id="rightFrame" name="rightFrame" style="width: 100%; border: 1px;
        border-color: Red;" width="200px" height="700px"></iframe>
        
        
</body>
</html>
但是我加载出的页面中JS失效。
我想了下第一种是不是在输出之前没有解析JS呢？
但是我弹出一下页面信息 发现源文件中的JS已经加载上了 
但是按钮调用JS方法失效。
第二种是不是输出之后就没办法调用JS了呢？
具体的机制不是很了解。写了些代码还是有问题。

解决方案 »

  1.   

    $(function() {
        $("#addForumBtn").bind("click", function() {
            var html = "<table  style=\"width:100%; text-align:left;\">";
            var div = "<div id=\"Popup\" style=\"display:none;width:100%\"></div>"
            window.CloseFlag = $(div).modal();
            $.jmsajax({
                url: window.ForumService,
                method: "GetTopicForum",
                data: {},
                success: function(data) {
                    var list = data["TopicForumList"];
                    var count = data["Count"];
                    var cols = 4 - count % 4 + 1;
                    var flag = 0;
                    if (count > 0) {
                        $.each(list, function(i, n) {
                            flag = i + 1;
                            if (flag % 4 == 1) {
                                html += "<tr>"
                            }
                            html += "<td ";
                            if (flag == count && cols > 0) {
                                html += "colspan='" + cols + "'";
                            }
                            html += "><input type=\"radio\" name=\"n\" id=\"" + list[i]["TopicId"] + "\" values=\"" + list[i]["TopicId"] + "\"  /><label for=\"" + list[i]["TopicId"] + "\">" + list[i]["TopicName"] + "</label></td>"
                            if (flag % 4 == 0 || flag == count) {
                                html += "</tr>"
                            }
                        });
                        html += "<tr><td colspan='4' style=\"text-align:right;\"><input type='button' value='下一步' id='next'/></td></tr></table>";
                        $("#Popup").html(html);
                        $("#Popup").find("#next").click(function() {
                            var values = $("#Popup").find("input:checked").attr("values");
                            html = "<table  style=\"width:100%; text-align:left;\">";
                            $("#Popup").html("");
                            $.jmsajax({
                                url: window.ForumService,
                                method: "GetForum",
                                data: {
                                    topicId: values
                                },
                                success: function(data) {
                                    list = data["ForumList"];
                                    count = data["Count"];
                                    cols = count % 4 == 0 ? 1 : 4 - count % 4 + 1;
                                    flag = 0;
                                    if (count > 0) {
                                        $.each(list, function(i, n) {
                                            flag = i + 1;
                                            if (flag % 4 == 1) {
                                                html += "<tr>"
                                            }
                                            html += "<td ";
                                            if (flag == count && cols > 1) {
                                                html += "colspan='" + cols + "'";
                                            }
                                            html += "><input type=\"checkbox\" name=\"n\" id=\"" + list[i]["ThemeId"] + "\" values=\"" + list[i]["TopicId"] + "\" ThemeId=\"" + list[i]["ThemeId"] + "\" ForumId=\"" + list[i]["ForumId"] + "\"  /><label for=\"" + list[i]["ThemeId"] + "\">" + list[i]["TopicName"] + "</label></td>"
                                            if (flag % 4 == 0 || flag == count) {
                                                html += "</tr>"
                                            }
                                        });
                                        html += "<tr><td colspan='4' style=\"text-align:right;\"><input type='button' value='定 制' id='btnCustomize'/></td></tr></table>";
                                        $("#Popup").html(html);
                                        $("#Popup").find("#btnCustomize").click(function() {
                                            $("#Popup").html("定制成功");
                                            setTimeout("window.CloseFlag.close()", 2000);
                                        });
                                    }
                                }
                            });
                        })
                    }
                }
            });
        });})   
    好好看看上面的列子，还有个问题有可能是用frames 加载页面的问题，你看看可以改成DIV不
      

  2.   

    你为什么不直接设置 iframe  的 src ='HTMLPage.htm'
      

  3.   


    做个练习 需求就是这样子的。想用这种方法来输出HTML 但是输出的JS 失效。
      

  4.   


    var deleteReply = function() {
        var div = "<div id=\"Popup\" style=\"display:none;\"></div>"
        window.CloseFlag = $(div).modal();
        var content = "<table>\
                                  <tr><td>您确定要删除吗？</td></tr>\
                                  <tr>\
                                     <td>\
                                         <input type=\"button\" value=\"确定\" id=\"btnConfirm\" values=" + $(this).attr("values") + " />\
                                         <input type=\"button\" value=\"取消\" id=\"btnCannel\" />\
                                     </td>\
                                  </tr>\
                                </table>";
        var popup = $("#Popup").html(content);
        popup.find("#btnConfirm").click(function() {
            $.jmsajax({
                url: window.ArticleReplyService,
                method: "DeleteArticleReply",
                data: {
                    articleReplyId: $(this).attr("values")
                },
                success: function(data) {
                    if (data == true) {
                        UPDATEREPLYCOUNT(window.ArticleId, "delete");
                        LoadData();
                        $("#Popup").text("删除成功");                }
                    else {
                        $("#Popup").text("删除失败");
                    }
                    setTimeout("window.CloseFlag.close()", 1500);
                }
            });
        });
        popup.find("#btnCannel").click(function() {
            window.CloseFlag.close();
        });}
    你这个其实就是一个funcation 完全没有必要去用调用接口的方式来做！
      

  5.   

    不知道是不是这个原因。
    我输出的页面只有
    <HTML></HTML> 这两个代码
    难道是他只是输出了 并没有把源文件绑到frame里？怎么才能把源文件里的HTML绑定到frame里呢 绑定后 他那个方法才能找到地址 来访问那个函数。
      

  6.   

    文件解析了之后。就是没有输出到指定的iframe里。所以才才找不到JS。
      

  7.   

    如何 改下这句话window.frames['rightFrame'].document.body.innerHTML = loadHtml;
    把loadHtml的内容写进去？
    或者有其他什么好的方案？
      

  8.   

    我猜，只要把结果中"</script>"，替换成"<\/script>"就可以了，当然只是猜测
      

  9.   

     window.frames['rightFrame'].document.write(msg);搞定 还是没写进去