Estoy usando SmoothState.js para las transiciones de página y funciona bien y carga las nuevas páginas con ajax. Sin embargo, tengo scripts JS en cada página que necesitan reinicializarse y no he podido hacer que siempre estén presentes en las transiciones de página.

Según las preguntas frecuentes:

smoothState.js proporciona la función de devolución de llamada onAfter que le permite volver a ejecutar sus complementos. Esto puede ser complicado si no está familiarizado con el funcionamiento de AJAX.

Cuando ejecuta un complemento en $ (document) .ready (), se registrará solo en los elementos que están actualmente en la página. Dado que estamos inyectando nuevos elementos en cada carga, necesitamos ejecutar los complementos nuevamente, limitándolos solo a las cosas nuevas.

Una buena forma de hacerlo es envolver las inicializaciones de su complemento en una función que llamamos tanto a $ .fn.ready () como a onAfter. Deberá especificar el contexto cada vez que inicialice los complementos para que no los doble. Esto se llama un "controlador de ejecución del módulo".

Mi plan ha sido tomar las funciones de mis archivos JS y ponerlas todas en una llamada onAfter dentro del archivo SmoothState.js. De esa manera, cada vez que un usuario cambia de página, las funciones siempre estarán disponibles.

Aquí la estructura del código que tengo ahora. He cavado mucho pero estoy atascado. ¿Me pueden ayudar a descubrir qué estoy haciendo mal? ¡Gracias por tu tiempo!

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