How to add the ability to re-run $(document).ready() functions

readyExec.js

/**
 * Replace jQuery's $.fn.ready() function with a mod exec
 *
 * Sites that make heavy use of the $(document).ready function
 * are generally incompatable with asynchrounous content. The
 * the $.fn.ready function only runs once. This script replaces
 * the ready function with a module execution controller that
 * let's us register functions and execute all of the functions
 * as we need them. This is useful after HTML gets injected on the
 * page and we want to rebind functionally to the new content.
 *
 * @author  Miguel Ángel Pérez   [email protected]
 * @note    Should be placed directly after jQuery on the page
 * 
 */
;(function($){
	var  $doc = $(document);

	/** create mod exec controller */
	$.readyFn = {
		list: [],
		register: function(fn) {
			$.readyFn.list.push(fn);
		},
		execute: function() {
			for (var i = 0; i < $.readyFn.list.length; i++) {
				try {
				   $.readyFn.list[i].apply(document, [$]);
				}
				catch (e) {
					throw e;
				}
			};
		}
	};

	/** run all functions */
	$doc.ready(function(){
		$.readyFn.execute();
	});

	/** register function */
	$.fn.ready = function(fn) {
		$.readyFn.register(fn);
	};

})(jQuery);


// To re-run the ready functions just use `$.readyFn.execute();`
// after the new HTML has been injected into the page.

I've tried running $.readyFn.execute(); in the onAfter callback but it never gets fired for some reason. I have tried putting a console.log() inside it and that never gets fired either.

can I use this in any way to re-run ready functions after navigating back?

This is working with smoothState, but now I get a page flash when the ready function fires, which defeats the purpose a little bit. Any ideas for a fix?

What happens if there are included JS files that also have a document.ready section? It seems like the function is not registering the functions inside those. For example, I refresh a child page, and then click the home page and none of the code executes in the document.ready function contained inside a separate JS file. If I refresh the home page, it picks up the functions and registers them. And then it works fine - unless the user refreshed one of the other pages - and then we lose the registrations again.

Is this working as expected? Or am I doing something wrong. I LOVE this smoothstate.js, but I may have to abandon it in my application because there are so many issues with loading up elements.

I ran a few more tests. Here is what I just discovered. I moved the document.ready functions to the actual default (home) page rather than just including it with a script tag. I moved the functions to a main.js function that is loaded on all pages. I ran the same tests again, and now it DOES work. Wow. Okay, so that tells me that I cannot just include JS scripts that contain document.ready functions and assume that readyExec.js is going to register those functions. It does not do that.

Well, that helps a lot - at least with understanding why this was not working. Now, I just need to find a clean way to make all my functions available on the corresponding pages. I wanted to avoid using a lot of "in-page" document.ready stuff, but I think it will need to be that way.

@whiskeysauer Where did you put the "Master" document.ready function in relation to the smoothstate function? Could I look at how you set your file up by chance? Thanks!