$('.some-selector') is a "global" selector. It's searching for elements with class some-selector anywhere in the document.
Instead, search on a specific page.
All your selectors are global. Doing this results in an unmanageable mess. It's no wonder the code has problems. You are coding as if the DOM contained only one page. That's not true with jQuery Mobile. At least during page transitions, you have at least two pages in the DOM.
I typically structure page callbacks like this:
$(document).on('pageinit', '.some-page', function() {
// First, get a convenient reference to this page
// As well, get jQuery objects for anything we'll be working with on the page
var $page = $(this);
var $fooButton = $page.find('.foo-button');
// Do anything here that you want to do each time the page is loaded
// ..
// ..
$page.on('pagebeforeshow', function() {
// Do anything here that you want to do before each time the page is shown
});
$fooButton.on('click', function() {
// do something when they hit the foo button on this page
});
)};
BTW, if you are wondering about the $, I like using $ as the first character for variables that hold a jQuery object.
You can use this for a single page, a group of pages (all with the same CSS class, for example, but you can use any selector that will select the pages you are interested in), or all pages (use .ui-page as selector).
If you don't understand the purpose of this code structure, you don't understand jQuery Mobile Ajax and page events. I'd go back and re-read the docs until you get it.
You shouldn't code as if the one page your code concerns is the only page in the document. Because that isn't true. You're writing code from a false assumption, and it will get you in a world of hurt.