History.js и перезагрузка Javascript

Question

Поэтому я использую плагин History.js для загрузки страниц в моей теме Wordpress через AJAX. Я добился успеха в этом, и вся функция загрузки работает нормально. Тем не менее, у меня есть много сценариев, работающих в одном файле, и они, конечно, не загружаются при изменении состояния.

Вот (очень краткая) версия моего 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 запускается каждый раз, когда pushstate инициируется History.js?

Answer 1

Похоже, вам нужно выполнить ready Снова код Оберните ваш код инициализации в функцию:

$(document).ready(initializePage);

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

А потом, когда "statechange" пожары, вы можете позвонить initializePage() снова.

Вам также необходимо убедиться, что код History запускается только один раз, поэтому поместите этот код в отдельную функцию:

$(document).ready(setupHistory);

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

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