1

コンテンツを動的にロードするページを取得しました。

これは、page_ONE.phpによって生成された再開されたHTMLコードです。

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(document).on('click', "#contentarea_ONE a", function(ev) { 
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
            $('#contentarea_ONE').load($(this).attr('href'));
            return false;
    });
    });
</script>
<div id="contentarea_ONE">
</div>
</body>

私はpage_TWO.phpとpage_THREE.phpにほぼ同じコードを持っていますが、対応する場所でONEをTWOまたはTHREEに変更するだけです。

各ページにボタンがあり、＃contentarea_ONE内にpage_TWO.phpをロードし、＃contentarea_TWO内にpage_THREE.phpをロードできます。

Firebugは、これをナビゲーターメモリ内のHTMLとして表示します。

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(document).on('click', "#contentarea_ONE a", function(ev) { 
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
            $('#contentarea_ONE').load($(this).attr('href'));
            return false;
    });
    });
</script>
<div id="contentarea_ONE">

<div id="contentarea_TWO">

<div id="contentarea_THREE">

</div>
</div>
</div>
</body>

これが問題です。3つのページをネストされた方法でロードした場合、 div #contentarea_THREE内のようなリンクをクリックすると、 contentarea_THREE内にコンテンツがロードされると予想されますが、コンテンツはdiv#contentarea_TWO内にロードされます。<a href="xxx/yyy">

なぜそれが起こるのですか？

4

1 に答える 1

1

あなたはこれで試すことができます：

$(document).ready(function() {
    $(document).on('click', '[id^="contentarea_"] a', function(ev) { 
        ev.preventDefault();
        ev.stopPropagation();
        $(this).closest('[id^="contentarea_"]').load($(this).attr('href'));
    });
});

まず最初に、すべてのdivが同じIDのイニシャルで始まっていることを確認してください。そうでない場合はcontentarea_、共通していると言えます。したがって、attrセレクターを使用してみてください。このdiv内のリンクをクリックしているときに、同じIDのイニシャルを持つ最も近いdivを見つけて$(this).closest('[id^="contentarea_"]')、ロードを実行してみてください。

于 2013-03-25T10:57:16.777 に答える