CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
PropSoft
PropSoft

Reputation: 597

jQuery Mobile data-role="header" click event not firing

I have a refresh button in the header of my jQuery mobile app and the click event will not fire in my browser (Chrome). Here is my code:

HTML

<div data-role="header" data-position="fixed">
    <a id="#refresh_deals" data-role="button" data-inline="true" data-iconpos="notext" data-mini="true" data-icon="refresh"></a>
    <div data-role="fieldcontain" class="ui-title" data-inline="true"><input id="main_search" data-mini="true" type="search" /></div>
    <a id="map_btn" data-inline="true" data-mini="true" data-transition="slide" href="#gps_map">Map</a>
</div><!-- header -->

JavaScript

$(document).bind('pageinit', function() {
    $('#refresh_deals').on('click', function(){
        console.log('refresh clicked')
    });
});

It's a pretty simple thing but have no luck with it! I have tried the tap event and pretty much everything else I could find around the web. Does anyone have any idea as to what is going on here?

Upvotes: 0

Views: 599

Answers (1)

palaѕн
palaѕн

Reputation: 73926

Your HTML is incorrect, try changing this:

<a id="#refresh_deals" ... />

to this:

<a id="refresh_deals" ... />

Upvotes: 1

Related Questions