JavaScript无法在AJAX内部加载DIV

Question

我有一个问题是让javascript代码在AJAX加载的div中工作,我试图包含jquery选项卡但它不起作用,ajax只输出文本,不会识别javascript.你能帮忙的话,我会很高兴.

这是我的js代码:

var OpenedPage;

function load(url, target) {
    document.getElementById(target).innerHTML = 'Loading ...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (req != undefined) {
        req.onreadystatechange = function () {
            loadDone(url, target);
        };
        req.open("GET", url, true);
        req.send("");
    }
}

function loadDone(url, target) {
    if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
            document.getElementById(target).innerHTML = "loaded" + req.responseText;
        } else {
            document.getElementById(target).innerHTML = "Error:\n" + req.status + "\n" + req.statusText;
        }
    }
}

function unload() {
    if (OpenedPage == "divsignin") {
        unloaddivsignin();
    }
    if (OpenedPage == "divHowto") {
        unloaddivHowto();
    }

}

function ShowHidedivsignin() {
    unload();
    OpenedPage = "divsignin";
    load("../slogin.php", "divsignin");
    $("#divsignin").animate({"height": "toggle"}, {duration: 800});
}

function unloaddivsignin() {
    OpenedPage = "";
    $("#divsignin").animate({"height": "toggle"}, {duration: 800});
}

function ShowHidedivHowto() {
    unload();
    OpenedPage = "divHowto";
    load("../howto.php", "divHowto");
    $("#divHowto").animate({"height": "toggle"}, {duration: 800});
}

function unloaddivHowto() {
    OpenedPage = "";
    $("#divHowto").animate({"height": "toggle"}, {duration: 800});
}

和HTML:

<div id="divsignin" style="display:none;width:auto"> </div>


<a onClick="ShowHidedivHowto(); return false;" href="#">help</a>

Answer 1

我没有检查你的所有代码,但是你用什么来触发加载到你的div中的javacript？窗口/文档就绪功能只会在最初加载页面时触发一次...

尝试加载到div中的内容如下所示...

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
<script type="text/javascript">
    $("#tabs").tabs();
</script>

请注意脚本标记位于末尾,因此在加载选项卡后将对其进行解析.

另一种方法是修改AJAX成功并添加时调用的函数

 $("#tabs").tabs();

到最后 - 这将确保代码仅在内容加载后运行.

Answer 2

由于您已经在使用jQuery,因此您应该开始重构,以便更具可读性,从而更易于维护.值得注意的是,您可以抛弃该加载函数,并合并一个类似于此的模式:

$(document).ready(function() {

    // <a class="help" href="help.html">help</a>
    $("a.help").live("click", function() {
        $("#divHowTo").html("Loading...");
        $.ajax({
            url: "../howto.php",
            dataType: "html",
            success: function(html) {
                $("#divHowTo").html(html)
                    .animate({"height": "toggle"}, { duration: 800 });
            }
        });
        return false;
    });
});