When jQM loads another page via AJAX, it only pulls something into your div [data-role = "page"], and nothing else, like head
So, you can, if you want, include any JS / CSS in this div, the problem is that if this page is available several times, then some CSS will accumulate, but the problem is much worse for JS.
Basically you get every page added to the DOM, so JS works on the whole DOM (every page you upload) if you use a global selector like $ ('div.someClass'), even using the id isn’t a perfect solution, because if you can link to one page twice.
For small sites
I solved this by moving all the CSS to a single file and for the JS code that I want to run every time the page loads, I get attached to the jQM events on the page and jQM page:
<script type="text/javascript"> $("div:jqmData(role='page'):last").bind('pageinit', function(){ </script>
The pageinit event is fired when the page loads only once (after loading it, it remains in memory if you go to it, even with the back button it does not fire again), on the other hand, every time the page is displayed, even when you navigate to it using the back button in a browser, for example.
The pageinit function is triggered when the DOM is present, the showhow event is only if you have code that depends on the displayed DOM, and you need a quick link to the active page via $ .mobile.activePage or some data is changed and you need to update this information each times when it is displayed. For most purposes, I use only pageinit as document.ready for jQM and bind my events there. Use binding for static elements and on instead of live elements for dynamic elements, because live events are listened to in the document root directory, you want to listen to the div page.
For larger sites
For larger sites, there are advantages to linking a live event to any pages and processing page types, so the js code does not load more than once.
If you have external js files with support for auxiliary functions that you need only once, put this at the top of all your pages (if there are not many), if you had a very large site, you could probably do better tracking which JS files were uploaded to the server.
All this can be avoided by simply not using AJAX to load new pages, so consider whether this transition / load effect is worth it.
* Here I process large jQM sites: *
- Bind a live event to all pages / dialogs. pageinit and pageshow events:
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
- I link to every page with the name:
<div data-role="page" data-mypage="employeelist"> In this live event, you can basically have a switch statement for each page "name", and then check event.type for pageinit / pageshow or both and put your code there, and then every time a page is created / this event will be fired , he knows which page called it, and then calls the corresponding code
In the end I had too much code, so I built a handler object where each js page is included in a separate js file and can register handlers with a live event
The disadvantage is that all your js for your entire site are loaded on the first page that the user reaches, but the minimized even large site is smaller than jQuery or jQM, so this should not be a concern. The advantage is that you no longer download all your JS for each page through AJAX every time a user navigates to a new page.
* note: now RequireJS can make this even more manageable