我在让 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>

最佳答案

我没有检查你所有的代码，但你用什么来触发加载到你的 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();

到它的末尾 - 同样，这将确保代码仅在内容加载后运行。

关于JavaScript 在 AJAX 加载的 DIV 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4476064/