Estou usando SmoothState.js para transições de página e funciona bem e carrega as novas páginas com ajax. No entanto, tenho scripts JS em cada página que precisam ser reinicializados e não consegui fazer com que eles sempre estivessem presentes nas transições de página.

Com base no FAQ:

smoothState.js fornece a função de retorno de chamada onAfter que permite executar novamente seus plug-ins. Isso pode ser complicado se você não estiver familiarizado com o funcionamento do AJAX.

Quando você executa um plugin em $ (document) .ready (), ele será registrado apenas nos elementos que estão atualmente na página. Como estamos injetando novos elementos a cada carregamento, precisamos executar os plug-ins novamente, definindo o escopo apenas para as novas coisas.

Uma boa maneira de fazer isso é agrupar as inicializações do plug-in em uma função que chamamos de $ .fn.ready () e onAfter. Você deseja especificar o contexto sempre que inicializar os plug-ins para não vinculá-los duas vezes. Isso é chamado de "controlador de execução de módulo".

O que meu plano tem sido é pegar as funções dos meus arquivos JS e colocá-las em uma chamada onAfter dentro do arquivo SmoothState.js. Dessa forma, sempre que um usuário altera a página, as funções sempre estarão disponíveis.

Aqui a estrutura de código que tenho agora. Eu fiz muitas escavações, mas estou preso. Você pode me ajudar a descobrir o que estou fazendo de errado? Obrigado pelo seu tempo!

$(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");
});