Ich benutze SmoothState.js für Seitenübergänge und es funktioniert einwandfrei und lädt die neuen Seiten mit Ajax. Ich habe jedoch JS-Skripte auf jeder Seite, die neu initialisiert werden müssen, und ich konnte nicht dafür sorgen, dass sie bei Seitenübergängen immer vorhanden sind.

Basiert auf den FAQ:

smoothState.js bietet die Rückruffunktion onAfter, mit der Sie Ihre Plugins erneut ausführen können. Dies kann schwierig sein, wenn Sie mit der Funktionsweise von AJAX nicht vertraut sind.

Wenn Sie ein Plugin für $ (document) .ready () ausführen, wird es nur für Elemente registriert, die sich derzeit auf der Seite befinden. Da wir bei jedem Ladevorgang neue Elemente einschleusen, müssen wir die Plugins erneut ausführen und sie auf die neuen Elemente beschränken.

Eine gute Möglichkeit, dies zu tun, besteht darin, Ihre Plugin-Initialisierungen in eine Funktion zu packen, die wir sowohl für $ .fn.ready () als auch für onAfter aufrufen. Sie sollten den Kontext bei jeder Initialisierung der Plugins angeben, damit Sie sie nicht doppelt binden. Dies wird als "Modulausführungs-Controller" bezeichnet.

Was mein Plan war, ist, die Funktionen aus meinen JS-Dateien zu nehmen und sie alle in einen onAfter-Aufruf in der SmoothState.js-Datei zu setzen. Auf diese Weise sind die Funktionen immer verfügbar, wenn ein Benutzer die Seite wechselt.

Hier die Codestruktur habe ich jetzt. Ich habe viel gegraben, aber ich stecke fest. Können Sie mir helfen, herauszufinden, was ich falsch mache? Vielen Dank für Ihre Zeit

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