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

问题：

functions.js每次由 History.js 启动 pushstate 时，我应该如何确保代码运行？

4

1 回答 1

2

听起来您需要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();
    });
    ....
}
于 2012-10-03T06:32:46.393 回答