1

問題: 動的に読み込まれたページのリンクが、他のページを動的に読み込まない。

私のインデックスページには、次のようなリンクがあります。

<li><a class="page_one" title="page_one" href="page_one.html">Page One</a></li>
<li><a class="page_two" title="page_two" href="page_two.html">Page Two</a></li>

これら<div id="guts">は、スクリプト dynamicpage.js (以下) を使用して、外部ページのコンテンツをインデックス ページの同じ id を持つ div に動的に読み込みます。javascript がオフでない限り、通常どおり外部ページを読み込みます。

これがJavaScriptです：

    $(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        $el;



    $(".dyn").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({

                            });
                        });
                        $(".dyn a").removeClass("current");
                        $(".dyn a[href="+newHash+"]").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});

インデックス ページのリンクはうまく機能していますが、たとえば、動的に読み込まれた page_1.html から page_2.html にリンクしたい場合、page_2 は正常に読み込まれ、URL が /#page_2.html に更新されません。

.delegate を .live に変更しようとしましたが、これにより完全に機能しなくなります。

誰かが私を正しい方向に押してくれますか?

前もって感謝します！

4

1 に答える 1

1

代わりにこれを試してください：

$("#main-content").delegate(".dyn a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

理由は次のとおりです。関数

$(".dyn").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

一致した要素内のclick既存の要素と新しい要素でハンドラーを正しくバインドします。したがって、要素に新しいタグを追加すると、スクリプトは意図したとおりに機能します。<a>.dyn<a>.dyn

ただし、$mainContent.hide().load(...メソッドは のコンテンツ$("#mai-content")を新しく読み込まれたコンテンツに置き換えます。つまり、元のコンテンツを置き換えた$(".dyn")ので、デリゲート関数は削除された を監視してい.dynます。

デリゲート マッチを に移動する$("#main-content")と、アクティブな「ライブ」または「デリゲート」ウォッチャーが維持され、定義したクリック ハンドラーが新しい.dyn a要素に正しくバインドされます。

于 2012-07-06T00:10:58.113 に答える