1

我正在尝试将 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;
  });
});

我已经研究过了，我知道我可以动态加载，但我不确定实现这一目标的最简单方法。

4

2 回答 2

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"
        });
});
于 2013-02-26T01:36:47.857 回答
0

你应该使用类似的东西$.ajax。这使您可以在不重新加载页面的情况下将内容异步加载到页面中，这听起来就像您想要的那样。

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

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

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

于 2013-02-26T01:37:59.303 回答