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的匿名函数中。

将Javascript加载到AJAX生成的div中

2 个答案: