1

そのため、 History.jsプラグインを使用して、AJAX 経由で Wordpress テーマにページをロードしています。私はそうすることに成功しており、ロード機能全体が正常に機能しています。ただし、同じファイルで動作する多くのスクリプトがあり、もちろん状態の変更時に読み込まれません。

説明する私のfunctions.jsファイルの（非常に短い）バージョンは次のとおりです。

(function($){})(window.jQuery);

$(document).ready(function() {
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
    $projects = $("#projects");
    $projects.append($(".contact"));

    $projects.isotope({
        itemSelector : '.item',
        layoutMode : 'masonry'
    });
    /* END PREVIOUS BLOCK */

    /* BEGIN HISTORY.JS IMPLEMENTATION */

    var History = window.History,
        State = History.getState();

    $('.nav a, .leftHold a').on('click', function(event) {
        event.preventDefault();
        var path = $(this).attr('href');
        var title = $(this).text();
        History.pushState('ajax', title, path);
    });

    History.Adapter.bind(window, 'statechange', function() {
        load_site_ajax();
    });

    function load_site_ajax() {
        State = History.getState();
        $('body, html').animate({ scrollTop : 0 }, 250, function() {
            $("#article").animate({ left : -1*$(window).width() }, 250, function() {
                $(this).load(State.url + ' #article', function() {
                    $(".nav li").each(function() {
                        $(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
                    }).promise().done(function() {
                        $(".nav a").each(function() {
                            if(State.title.indexOf($(this).text()) != -1) {
                                $(this).parent().addClass('current_page_item');
                                return false;
                            }
                        });
                    });
                }).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
            });
        });
    }

    /* END HISTORY.JS */
});

functions.jsこのファイルをドキュメントの最後body、終了タグの直前にロードします。ブラウザーの状態を変更するたびに、コード$(document).ready();が再び実行されないことがわかります。したがって、Isotope と他の Javascript はいずれも再度読み込まれません。

質問：

functions.jsプッシュステートが History.js によって開始されるたびにコードが実行されるようにするにはどうすればよいですか?

4

1 に答える 1

2

readyコードをもう一度実行する必要があるようです。初期化コードを関数でラップします。

$(document).ready(initializePage);

function initializePage() {
    /* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
    ... 
}

そして、"statechange"発火したら、initializePage()もう一度呼び出すことができます。

また、履歴コードが 1 回だけ実行されるようにする必要があるため、そのコードを別の関数に入れます。

$(document).ready(setupHistory);

function setupHistory() {
    /* BEGIN HISTORY.JS IMPLEMENTATION */

    var History = window.History,
        State = History.getState();
    });
    ....
}
于 2012-10-03T06:32:46.393 に答える