JQuery Mobile Change Page doesnt load JS files

Question

In an effort to better organize our JQuery Mobile PhoneGap application I would like to be able to use tags on the new page and have that JS come in when the page is brought

Answer 1

To introduce new JS includes to pages loaded (via AJAX) with jQuery Mobile you must have the references to those files within the data-role="page" or (data-role="dialog") elements of each page because jQuery Mobile does not process anything outside of those elements during AJAX page loads.

Alternatively, you could use JavaScript to create the new script tags dynamically on the 'pageshow' event of each page transition. Something like this:

$(document).on('pageshow', 'div[data-role*="page"],div[data-role*="dialog"]', function () {
     (function () {
        var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
        script.src = '/path/to/new/include.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
    })();
});

Answer 2

SIMPLY MOVE YOUR JS CODE WITHIN "div data-role='page' SINCE JQM WILL SKIP THE REST

Answer 3

I also had a similar problem that wasn't solved by fixing the placement of the <script> tags. It seems that if you have a compile error in your code (in my case, putting int instead of var when declaring a for-loop variable), the entire script will not be loaded and will throw no errors to the log (at least, not to the LogCat in Eclipse's Android simulator). Be sure to run your scripts through an error-checker like JSLint first.