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 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 uses data-url for internal linking. It will typically populate these itself and change target the data-role=”page” containers using the hash links. I suggest that any generated page have the data-url pre-populated by the server (i.e. do jQuery’s job for the first page that the user lands on – if they land on the homepage, populate the data-url field with the homepage information, etc).
For example: