executing specific javascript on specific pages
Hello and good morning everybody.
I am developing a mobile version website with JQM 1.2.0, and I need to execute some specific javascript only on specific pages.
My problem is: how do I get JQM to recognize which page it is on and so having it execute only the javascript specific to that page?
In the desktop version I used a page template with a main div whose ID is "page" (literally):
<div id="page" data-role="page">
... main content, generated by PHP, accordingly to URL path ...
</div>
So, strategy one would be to change this layout, having each website page (or better, each page template) having its own unique ID (I will also need to change some CSS style which I attached to the ID instead of to a class, but that's allright). This way I can have all my javascript loaded in the <head>, but execute only the one approapriate to the current page ID.
The con of this strategy is that different content (URL) loaded using the same page template (eg: articles) will still have the same ID (ie: two different articles have different URLs, but they use the same page template, hence they have the same div ID).
Strategy two would be to completely remove IDs (or just ignore them). Javascript specific to some page would be loaded from within THAT page. I may put it inline within data-role=page or at the end of <body> element.
One con of this strategy is that I may end up with spreading javascript over different places.
Strategy three would be to load all javascript in the <head>, and then check for the existence of some specific HTML elements, present only on those specific pages, before executing the script.
I'm not sure which way is the best and recommended one.
How can I execute specific javascript for specific pages and which is the recommended strategy to do this?
Do I really need to have a unique ID in <div id="" data-role="page"> for each and every page ?
Thank you for any help!