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();中的代码都不再运行，因此同位素和我的其他Javascripts都没有再次加载。

问题：

每当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();
    });
    ....
}

History.js并重新加载Javascript

1 个答案: