jqm-script-loader.js

// Use this loader on only pagechange event. The loaded element
// is automatically parsed, current page and url are deduced
// from it.
//
// Eren Turkay <[email protected]>
// 2014-08-25
//
// Based on http://www.integralist.co.uk/posts/jquery-mobile-loading-script-files/
ScriptLoader = function() {
    var pages = $('div[data-role="page"]');

    // the current page is always the last div in the Array, so we store it in a variable
    this.currentPage = pages[pages.length-1];

    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    this.nextUrl = this.currentPage.getAttribute('data-url');
}

ScriptLoader.prototype.loadScript = function(scriptName) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'js/' + scriptName;
    this.currentPage.appendChild(elem);
};

ScriptLoader.prototype.on = function(url, scriptName) {
    if (this.nextUrl.indexOf(url) !== -1) {
        // we matched the url, load the script
        console.log(url + ' matched. Loading ' + scriptName);
        this.loadScript(scriptName);
    }
};


$(document).on('pagechange', function(event){
    var loader = new ScriptLoader();
    loader.on('about.html', 'about.js');
    loader.on('articles.html', 'articles.js');
});