javascript - 在 SmoothState.Js 页面更改后重新初始化页面脚本

Question

我正在使用 SmoothState.js 进行页面转换，它工作正常并使用 ajax 加载新页面。但是，我在每个需要重新初始化的页面上都有 JS 脚本，但我无法让它们始终出现在页面转换中。

Based on the FAQ:

smoothState.js provides the onAfter callback function that allows you to re-run your plugins. This can be tricky if you're unfamiliar with how AJAX works.

When you run a plugin on $(document).ready(), it's going to register only on elements that are currently on the page. Since we're injecting new elements every load, we need to run the plugins again, scoping it to just the new stuff.

A good way to do this is to wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter. You'll want to specify the context each time you initialize the plugins so that you don't double-bind them. This is called a "module execution controller".

我的计划是从我的 JS 文件中获取函数并将它们全部放入 SmoothState.js 文件内的 onAfter 调用中。这样，每次用户更改页面时，这些功能将始终可用。

这是我现在的代码结构。我做了很多挖掘，但我被困住了。你能帮我弄清楚我做错了什么吗？感谢您的宝贵时间!

$(document).ready(function() {
    mail();

});

$('#main').smoothState({
    onAfter: function() {
        mail();
    }
});

function mail() {
    // script from mail.js goes here
}

$(function() {
    $('#main').smoothState();
});

$(function() {
    "use strict";
    var options = {
            prefetch: true,
            pageCacheSize: 3,
            onStart: {
                duration: 250, // Duration of our animation 
                render: function($container) {
                    // Add your CSS animation reversing class 

                    $container.addClass("is-exiting");


                    // Restart your animation 
                    smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class 
                    $container.removeClass("is-exiting");

                    // Inject the new content 
                    $container.html($newContent);


                }

            },

        },
        smoothState = $("#main").smoothState(options).data("smoothState");
});

Answer 1

通过将 onAfter 脚本移动到主 smoothstate 函数(删除其他 smoothstate 函数)，我设法在代码末尾运行一个单独的函数。在浏览器刷新的情况下，也可以在文档就绪时运行您的函数。如果它与您的代码一样工作，它将如下所示:

$(document).ready(function() {
        mail();

    });

    function mail() {
        // script from mail.js goes here
    }

    $(function() {
        "use strict";
        var options = {
                prefetch: true,
                pageCacheSize: 3,
                onStart: {
                    duration: 250, // Duration of our animation 
                    render: function($container) {
                        // Add your CSS animation reversing class 

                        $container.addClass("is-exiting");


                        // Restart your animation 
                        smoothState.restartCSSAnimations();
                    }
                },
                onReady: {
                    duration: 0,
                    render: function($container, $newContent) {
                        // Remove your CSS animation reversing class 
                        $container.removeClass("is-exiting");

                        // Inject the new content 
                        $container.html($newContent);


                    }

                },
                onAfter: function() {
                    mail();
                }
            },
            smoothState = $("#main").smoothState(options).data("smoothState");
    });