Exploring the capabilities of jQuery Mobile has led me to delve into setting up an application and its multiple pages. My hope is for the framework to seamlessly load pages with transitions while ensuring each page remains distinct from one another. However, it appears that when a page is loaded via Ajax, remnants of JavaScript and CSS from the previous page may still linger:
Illustrative Example 1 - JavaScript
Consider this scenario in page1.html:
<script>
setInterval(function() {
console.info('Interval' + (new Date()));
}, 1000);
</script>
If I proceed to load page2.html, the interval continues running uninterrupted. Upon returning to page1, a new interval initiates alongside the existing one, leading to multiple concurrent intervals as I navigate back and forth.
Illustrative Example 2 - CSS
An additional concern arises regarding styling. Imagine two developers independently working on separate pages, both incorporating an element named my-element. In page1, this element is styled as follows:
<style>
#my-element {
color: red;
}
</style>
<span id="my-element">This one is red</span>
Conversely, in page2, the same element lacks any specific styling:
<span id="my-element">This one has no style</span>
Upon navigating from page1.html and then to page2.html, my-element unexpectedly adopts the red coloration, despite not being styled in page2.html.
Ergo, I find myself pondering two fundamental questions:
It increasingly appears that the current method employed by jQuery Mobile in loading pages lacks scalability. Is there a feasible way to prompt jQuery Mobile to load pages devoid of any lingering artifacts, ensuring subsequent pages remain unaffected by remnants of JS or CSS?
If not, how can one effectively manage multiple pages within jQuery Mobile in a sustainable manner?