Update:
Based on your edited OP and comment below, when using single page model, functions/JS code that is related to a specific page should be placed inside that page's div.
jQuery Mobile uses Ajax to load pages, it loads all libraries and code of first loaded page's head
tag, and neglects the rest as it loads only data-role="page"
div.
<div data-role="page" id="characters">
<script>
<!-- place code here -->
</script>
</div>
Because you bind to pageinit
without specifying a page. The code will be executed whenever a page is initiated.
You should bind it to page id to fire once only.
$(document).on("pageinit", "#page_id", function () {
// code
});