Jquery mobile button click at corner not working

Question

I created a mobile app using cordova and jQuery mobile as the UI framework. It is working fine, except that the click event on the jQuery mobile buttons does not trigger when clicking on the corners. I see a hover effect (button color change) when clicking at corner, but click event not triggered. Click event is triggered when clicked a little inside from button corner.

I am using jQuery mobile 1.4.2. Below is my button (anchor tag with class showOptions and ui-btn) markup and click handler:

<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
    <h1 class="ui-title">All Packages</h1>
    <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
        <a href="#" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>
    </div>
</div>


$('.showOptions').on('click', function() {
    console.log('button clicked');
    return false;
});

Is anybody out there also facing same issue? Please help me.

Answer 1

Instead of using <button> or <input type="submit">, it's better to use <a> (like you) with data-role="button" attribute.

<a href="#" data-role="button" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>

Anchors with data-role=button dont get wrapped with a .ui-btn div. Hence, you have will have the whole button responsive to any event.