1

AJAX を介して生成され、外部 PHP ファイルで満たされた div に Javascript をロードしようとしています。

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 を読み込んで埋めるためのハイパーリンクが必要ですが、生成された div 内でスクリプトが機能するように、外部の Javascript ファイルも呼び出す必要があります。

これが私のスクリプトです：

$(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 に答える