JQuery Mobile Change Page doesnt load JS files

问题

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 in, with changePage or something other.

So far, my efforts to do this have not yielded what I am looking for. Unless I include all JS files on index.html and then write conditional logic in the PageShow event handler, which is not a good solution.

Any thoughts?

回答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);
    })();
});

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/10540219/jquery-mobile-change-page-doesnt-load-js-files

标签

javascript

jquery

jquery-mobile