jQuery mobile not loading new page scripts

Question

Using jQuery Mobile with Django: During the page transitions, the base scripts seems to be loading fine, but going from one page to the next, new page's scripts under the header do not load up in the browser.

To be more specific:

1. I load my home page by typing in the url, and everything works.
2. I load the next page by clicking on a link within home page, and the DOM loads, but scripts associated with the page in the page header, do not load.
3. If I refresh this page, or I type the URL of this page in the browser directly (bypassing the page transitions), the page loads the scripts the way it should.

I know that jquery mobile tries to implement page transitions using ajax, but I am hoping I can keep the scripts in header/footer. I would hate to have to put the scripts under <div data-role="page" >

Answer 1

That is because jQuery Mobile loads only the code within the first data-role="page" element in the DOM.

There are a couple of options you can choose from on how to fix this:

1. You can put your page-specific JS inside the data-role="page" element, so it will be loaded when jQuery Mobile loads the page via AJAX.
2. You can put all of your code in a single JS file and include it in every page on the site, it will only be loaded on full-page refreshes but this way all the code for your site will be available all the time (after minification and compression you really have to have a lot of code to make this inefficient).

I'm sure there are other methods as well but here are a couple I've had work for me.