Conflict with same ID on different pages of site using Jquery Mobile
duplicates, jquery, jquery-mobile
Solution
I found this code which seems to remove the previous page from the cache but preserve the back button and transition.
$('div').live('pagehide', function(event, ui) {
$(event.target).remove();
});
Problem
I am making a mobile version of an existing site using query mobile. The site is hundreds of pages with established markup that works fine for the www version. The problem is that there are many instances of the same element ID on every page like #useername or #map or #photo. This is fine on www since each page loads independently so there is no conflict. In JQM, it looks like all the pages are somehow cached together and the code refers to the previous page. For example: Page1.html ``` <div id="commonIdOnEveryPage">Page 1</div> <a href="page2.html">Link</a> <script> alert($("#commonIdOnEveryPage").html()); </script> ``` Page2.html ``` <div id="commonIdOnEveryPage">Page 2</div> <script> alert($("#commonIdOnEveryPage").html()); </script> ``` After clicking the link from page 1 to go to page 2, the alert still shows "Page 1". In this example, it would be easy change the id on the 2nd page, but in the actual site, there are hundreds of places on different pages where the same ID is used and the JS is thousands of linea long. Surely there is a way to make JQM compatible with this.