将 Javascript 加载到 AJAX 生成的 div 中

Question

我正在尝试将 Javascript 加载到通过 AJAX 生成并填充了外部 PHP 文件的 div 中。

这是我用来加载 AJAX div 和我的 PHP 内容的导航：

<div id="portfolioContent">
  <div id="portfoliotabContainer">
    <ul id="portfolioTabs">
      <li><a id="dashboardTab" href="./portfolio/portfoliocontent/dashboard.php">Dashboard</a></li>
      <li><a id="casedetailsTab" href="./portfolio/portfoliocontent/casedetails.php">Case Details</a></li>
      <li><a id="correspondenceTab" href="./portfolio/portfoliocontent/correspondence.php">Correspondence</a></li>
      <li><a id="pleadingTab" href="./portfolio/portfoliocontent/pleading.php">Pleading</a></li>
      <li><a id="discoveryTab" href="./portfolio/portfoliocontent/discovery.php">Discovery</a></li>
      <li><a id="expensesTab" href="./portfolio/portfoliocontent/expenses.php">Expenses</a></li>
      <li><a id="indexTab" href="./portfolio/portfoliocontent/docindex.php">Document Index</a></li>
    </ul>
  </div>

我需要超链接来加载和填充生成的 div，还需要调用外部 Javascript 文件，以便我的脚本在生成的 div 中工作。

这是我的脚本：

$(function () {
  $("#portfolioTabs li a").live("click", function () {
    var pagecontent = $(document.createElement("div"));
    pagecontent.load(
    $(this).attr("href"));
    $(".insideContent").html(pagecontent);
    $(".portfolioContent").animate({
      height: "110%"
    });
    $(".insideContent").animate({
      bottom: "0px"
    });
    return false;
  });
});

我对此进行了调查，并且我知道我可以动态加载，但我不确定实现这一目标的最简单方法。

Answer 1

问题似乎是您将内容分配给尚未加载的另一个元素。

你可以使用load的回调函数：

pagecontent.load($(this).attr("href"), function() {
        // this gets executed when the `load` is complete
        $(".insideContent").html(pagecontent);      

        $(".portfolioContent").animate({                    
            height: "110%"                               
        });                                                
        $(".insideContent").animate({
            bottom: "0px"
        });
});

Answer 2

您应该使用$.ajax 之类的内容。这允许您将内容异步加载到您的页面中，而无需重新加载页面，这听起来就像您想要的那样。

在您的事件处理程序中，您可能需要类似的东西

var url = $(this).attr("href");
$.ajax({
    url: url,
    success: function(data) {
        $(".insideContent").html(data);
    }
});

请注意，依赖于数据加载的所有内容都必须放在 我更新 html 的匿名函数中。