Question

jQuery mobile button renders gibberish for filter button after clicking on pagination. Click event that shows map also stops working after changing the page.

Should I call refresh page?

Sandbox link

Markup is as following:

<div data-role="header" data-theme="b" id="rest-header">
    <div class="ui-grid-b">
        <div class="ui-block-a"><a href="#" data-role="button" id="filter-btn" class="ui-btn-left">Filter</a></div>
        <div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
        <div class="ui-block-c"><a href="#" data-role="button" id="map-btn" class="ui-btn-right">Map</a></div>
    </div>
</div><!-- /header -->

Answer 1

First I would suggest using jQuery 1.6.4 as jQM only supports this version for 1.0

Your problem is you’re adding a back button when navigating to another page, this is causing an overlap of both the filter and back button.

Removing the data-add-back-btn="true" attribute should solve the issue