jQuery Mobile's AJAX navigation system only loads in the contents of the page wrapper, the scripts and styles in the
head are discarded so you need to plan how to load and organize these assets.
When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's
href to formulate an AJAX request (instead of allowing the browser's default link behavior of requesting that
href with full page load). When that AJAX request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's
body element (or more specifically the
data-role="page" element, if it's provided), meaning nothing in the
head of the page will be used (with the exception of the page title, which is fetched specifically). Please note that scripts loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.
This means that any scripts and styles referenced in the
head of a page won't have any effect when a page is loaded via AJAX, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the
head scripts are only expected to execute once per browsing session.
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the
pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its
id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via AJAX.
Another approach for page-specific scripting would be to include scripts at the end of the
body element when no
data-role=page element is defined, or inside the first
data-role=page element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via AJAX or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a
data-role="page" element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via AJAX.