The data-url attribute is used to track the origin of a page element. If it is not explicitly installed, the pages embedded in the main document of the application have the data-url attribute equal to the id page. The one exception to this is the first page in the document. When you request a page, then jQuery Mobile first tries to find a page with a suitable data-url in the DOM. If he does not find such a page, he executes an Ajax request and loads a new page into the DOM.
You can solve the problem using one of the following methods:
Use the code below to remove the second page from the DOM when switching to another page.
$(document).on('pagehide', '#second-page', function(event, ui){ $(event.target).remove(); });
Thus, when you go to the first page, the second page will be deleted from the DOM, and your problem will be solved.
OR :
Using:
$.mobile.changePage('car-details.html', { data: { id: this.id } });
without using the dataUrl parameter.
This creates the url: ../ car-details.html? id = my_val
When updating, the URL remains the same, so you can still get the parameters, and the data-url matches the page ID.
OR
Before changePage() check if there is a page in the DOM with data-url equal to the identifier of the second page, and delete it manually.
if ($("#second-page-id").length > 0 && $("#second-page-id").attr("data-url") === 'second-page-id' ) { console.log('remove from DOM'); $("#second-page-id").remove(); }