jQuery Mobile - loading URL directly then loading same URL via hash produces new data-role="page" div in the DOM
The question might be slightly hard to understand, so I'll explain it more verbosely:

Say I have a mobile site on a website and the root of the site is http://www.site.com/mobile/

If I load up this page without any hashes in the URL, then I get one div with data-role="page" in the DOM. If I then click a link to another page, which might take me to the URL http://www.site.com/mobile/#/mobile/contact.html, I get another data-role="page" link for that page is inserted into the div. That's all fine and correct.

However, if I then follow a link on this page back to the home page (but not the back button) and get the URL http://www.site.com/mobile/#/mobile/, then rather than jQuery Mobile reusing the same data-role="page" div that was there when the page was first loaded, a new one is inserted into the DOM.

This has the effect that any JavaScript bound to the 'pagecreate' event that targets specific ids within the home page doesn't work as the ids are ambiguous.

One thing I noticed is when inspecting the generated HTML is that a data-role="page" div loaded directly (not through a hash Ajax load) has a data-url attribute that is equal to the id of that div, but when it is loaded through a hash, then data-url is equal to the hash value. I wonder if this inconsistency is causing the issue?
jQuery Mobile - loading URL directly then loading same URL via hash produces new data-role="page" div in the DOM
===

The question might be slightly hard to understand, so I'll explain it more verbosely:

Say I have a mobile site on a website and the root of the site is http://www.site.com/mobile/

If I load up this page without any hashes in the URL, then I get one div with data-role="page" in the DOM. If I then click a link to another page, which might take me to the URL http://www.site.com/mobile/#/mobile/contact.html, I get another data-role="page" link for that page is inserted into the div. That's all fine and correct.

However, if I then follow a link on this page back to the home page (but not the back button) and get the URL http://www.site.com/mobile/#/mobile/, then rather than jQuery Mobile reusing the same data-role="page" div that was there when the page was first loaded, a new one is inserted into the DOM.

This has the effect that any JavaScript bound to the 'pagecreate' event that targets specific ids within the home page doesn't work as the ids are ambiguous.

One thing I noticed is when inspecting the generated HTML is that a data-role="page" div loaded directly (not through a hash Ajax load) has a data-url attribute that is equal to the id of that div, but when it is loaded through a hash, then data-url is equal to the hash value. I wonder if this inconsistency is causing the issue?