Question

I have multiple small no text buttons on my JQM header, see image below, on my android phonegap app. The buttons are very difficult to click on touch screen devices (they are fine on desktop browsers). It seems that to fire the click event I must click on the top 10-20% of the button, clicking on the middle or bottom of the button does nothing.

Here is the code in the HTML:

<div data-role="header" data-position="fixed">
  <h1>Field Trip GB</h1>
  <div class="ui-header-buttons ui-btn-right" data-type="horizontal" >
    <a class="gpstrack-running"
       data-role="button"
       data-inline="true"
       data-transition="none"
       data-iconpos="notext"
       data-shadow="false"
       data-iconshadow="false"
       style="display: none;">
    </a>
    <a class="user-locate"
       data-role="button"
       data-inline="true"
       data-transition="none"
       data-iconpos="notext">
    </a>
    <a class="map-search"
       data-role="button"
       data-inline="true"
       data-transition="none"
       data-iconpos="notext">
    </a>
  </div>
</div>

And I’m listening in javascript like:

$('.map-search').live('click', function(){
    console.log('map search');
});

Answer 1

Use tap or vclick for your binding. I.e. .on('tap',function(){...}).

.live() is deprecated since jquery 1.7.

Source: jQM event docs