JavaScript无法在AJAX内部加载DIV

我有一个问题,让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:

 
help

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

对于加载到div中的内容,请尝试以下内容…

 

First tab is active by default:

$('#example').tabs();

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. 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.

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

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

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

到最后 – 再次确保代码只在内容加载后运行。

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

 $(document).ready(function() { // help $("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; }); });