JavaScript的工作不AJAX里面装DIV [英] JavaScript not working inside AJAX loaded DIV

问题描述

我有一个问题得到了Java Script code工作一个AJAX加载DIV中，我试图包括jQuery的标签，但它不工作，阿贾克斯输出纯文本，并不会承认的Java脚本。

i am having a problem getting the java script code to work inside a ajax loaded div, i am trying to include jquery tabs but it not working, the ajax outputs text only and wont recognize the java script.

这是我的js code：

here is my js code:

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 });
}



and the html :

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


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

任何帮助将非常AP preciated 谢谢

any help will be much appreciated thanks

推荐答案

我没有检查所有code，但你有什么用触发加载到你的DIV的javacript？窗口/文件准备好功能只会触发一次，当页面初始加载中...

I haven't checked all your code but what are you using to trigger the javacript loaded into your div? the window/document ready functions will only fire once when the page is initially loaded...

尝试类似下面的加载到DIV的内容...

Try the something like the following for the content loaded into the 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>

请注意脚本标记是在年底使加载选项卡后，将被解析。

Note the script tag is at the end so it will be parsed after the tabs are loaded.

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

The alternative would be to modify the function called when AJAX is successful and add

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

到它的结束 - 再次THI只会被加载的内容后，确保code运行

to the end of it - again thi will make sure the code runs only after the contents has been loaded.

这篇关于JavaScript的工作不AJAX里面装DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！