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

我正在使用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");
});

解决方法:

通过将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");
    });