Reinitializing page scripts after SmoothState.Js page change

Question

I am using SmoothState.js for page transitions and it works fine and loads the new pages with ajax. However, I have JS scripts on each page that need to be reinitialized and I h

Answer 1

I managed to get a separate function to run at the end of the code by moving your onAfter script into the main smoothstate function (remove the other smoothstate functions). Run your function on document ready as well in case of browser refresh. If it works the same with your code, it would be as follows:

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

Answer 2

I am working on a website right now which is similar to what you are doing I think.

The way I have done it is, I have two main functions. The first one contains all the functions that need to run only once ever - ie, the stuff to handle Ajax and POPSTATE changes etc. This function runs the 2nd main function at the end. The 2nd main function is a function that contains functions that need to rerun on page changes, it looks for a specific class or ID tag to be in the contents area of the website before running the functions and attaching event listeners to elements on the newly loaded page.

function mainOne() {
    // Set up Ajax, set up any navigation menus that stay constant through pages etc

    // Also runs the 2nd function so that the functions specific to the page
    //   the code loads up on also get run
    mainTwo();
}
function mainTwo() {
    // Contains functions that are specific to pages that can be loaded via AJAX
    /* ie:
    if( $("element-that-only-exists-once-on-one-specific-page").length == 1 ) {
        // Do stuff specific to only this page
    } */
}

In my AJAX function, I call the mainTwo() with every successful page load.

A novel way of making sure that a function runs only once per element, is to add a class to the element you are attaching an event to, for example:

$("div.objects").not(".processed").addClass("processed").click(function(){
    // Stuff to do in the function
});

From what you quoted there, sounds like my mainTwo() function is pretty much what they want you to set up. Basically a main function to hold all your other functions. If you post more code then I can help you sort it out.