javascript - History.js 和重新加载 Javascript

Question

所以我正在使用 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 文件加载到文档的 end，就在结束 body 标记之前。我可以看出，每当我更改浏览器状态时，$(document).ready(); 中的代码都不会再次运行，因此 Isotope 和我的其他 Javascript 都不会再次加载。

问题:

如何确保每次 History.js 发起 pushstate 时 functions.js 中的代码都运行？

Answer 1

听起来您需要再次执行ready 代码。将您的初始化代码包装在一个函数中:

$(document).ready(initializePage);

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

然后，当 "statechange" 触发时，您可以再次调用 initializePage()。

您还需要确保历史代码只运行一次，因此将该代码放在一个单独的函数中:

$(document).ready(setupHistory);

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

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