3

.load() で読み込まれた HTML コンテンツに問題があります。うまく機能している「アコーディオン」メニューがあり、メニューの項目をクリックすると、必要なコンテンツを割り当てられた [div] にロードするために使用される小さな jquery コードがあります。

私が抱えている問題は、読み込まれたページの一部に、いくつかの href="" リンクがあることです。これらのリンクをクリックしても、「次の」ページが div に読み込まれることはありませんが、実際にはメイン ページが強制的に再読み込みされます (ブラウザーの [再読み込み] ボタンを押したかのように)...

menu.js (抜粋)

$(document).ready(function() {
    $(".Page1").click(function () {
        $("#pageloadarea").load('Page1.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });

    $(".Page2").click(function () {
        $("#pageloadarea").load('Page2.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });
});

index.php ページのメニュー セクション (抜粋)

<ul>
  <li class="button"><a href="" class="Page1">Page1</a></li>
  <li class="dropdown">
    <ul>
      <li><a href="" class="Page2">Page2</a></li>
      <li><a href="" class="Page3">Page3</a></li>
      <li><a href="" class="Page4">Page4</a></li>
    </ul>
  </li>
</ul>

index.phpページでは、メニューが内部に配置[div id="menu"]され、コンテンツが挿入/ロードされます[div id="pageloadarea"]

メニューのPage1 をクリックすると、 Page1.phpがに正常にロードされ、Page2、Page3、およびPage4 (メニューから)をクリックすると...[div]

Page1.phpが読み込まれると、標準のリンクが表示されます。[div]

<a href="" class="Page2">Page 2</a>

これは機能しないリンクです。内部にリンクを含むサブページが多数あり[a href]ますが、メイン コンテンツがプロセスを完了すると、どれも機能しません.load()...

任意の支援をいただければ幸いです!

4

2 に答える 2

4 
$(document).ready(function() {
    $(document).on("click",".Page1", function () {
        $("#pageloadarea").load('Page1.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });

    $(document).on("click",".Page2", function () {
        $("#pageloadarea").load('Page2.php');
        $('head').append(
            '<link rel="stylesheet" href="includes/style.css" type="text/css" />'
        );
        return false;
    });
});

イベントを新しく読み込まれた DOM 要素にもバインドするため、これを使用します。

于 2013-05-16T20:30:21.567 に答える
1

現在のページをロードするか、委任を使用したら、すべてのイベント ハンドラーをリンクにアタッチする必要があります。

委任例

HTML リンク:

<!-- add a class to filter ajax links on "ajaxify", also use the HREF attribute
     For the page to be loaded - not sure whay you arent doing that now... -->
<a href="Page2.php" class="Page2 ajaxify">Page2</a>

JS

// use delegation to attatch the event handlers

$(function(){
   $(document).on('click', 'a.ajaxify', function (e) {
        e.preventDefault(); // prevent normal link navigation
        var $this = $(this),
            url = $this.attr('href');

        $("#pageloadarea").load(url);
        $('head').append('<link rel="stylesheet" href="includes/style.css" type="text/css" />');

        return false; 
   });
});

委任を使用することにより、ハンドラーはdocument要素にアタッチされ、クリックイベントがバブルアップするとフィルターされます...トリガーがだったa.ajaxify場合、ハンドラーが呼び出されます。a.ajaxifyこれにより、最初にハンドラーをアタッチしたときに DOM になかった のインスタンスを処理できます。

于 2013-05-16T20:29:26.680 に答える