CODEWITHSUNDEEP
jquery-mobile
Vlad Vinnikov
Vlad Vinnikov

Reputation: 1457

Rendering of a button in jquery mobile

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 -->

Upvotes: 0

Views: 598

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85298

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

Upvotes: 2

dfsq
dfsq

Reputation: 193261

For map button you should use live event binding or delegation so that it works for dynamic content. Instead of 

$( "#map-btn" ).bind( "click", function(event, ui) { ... });

try

$(document).on('click', '#map-btn', function() {
    // ...
})

For filter button I can see the Back button under the Filter one, so you want to get rid of the Back button since you don't need it right there. You can remove data-add-back-btn="true" attribute.

Upvotes: 1

Related Questions