Every now an then you have to get creative.  Because every now an then, your applications grow beyond their original scope.  This happened to me recently, and as a result, I came up with the following script.  If you ever need to load multiple html files via jQuery’s .load() function, and you need to run some scripts after the final file has loaded, this is how you do it.  For this example, we are working with a manual that has fifty-two chapters.  It’s really rather simple.  Check the index, and on the final iteration, run the .load function with the function attribute as the final attribute, encapsulating all of the scripts you need to run, and viola, you’re cooking bacon in butter.

This was previously being accomplished with a setTimeout.  It was a hack, and an unreliable hack at that.  It is ALWAYS better to run child scripts that rely on other parent scripts when the parent script is finished weaving its magic.  Please don’t use setTimeout functions unless there is absolutely no other option.  Thank you.  That is all…

for (i = 1; i < 53; i++) {
    if (i.toString().length == 1) {
        index = '0' + i.toString();
    } else {
        index = i;
    };
    $('#manualBody').append('<div id="chapter'+index+'Container"></div>');
    if (i < 52) {
        $('#chapter'+index+'Container').load('docs/chapter'+index+'.html', function() {
            /* run your scripts here that are dependent on all of the files being loaded */
        });
    };
};