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