CODEWITHSUNDEEP
javascriptjquerybuttonjquery-mobile
Andrei
Andrei

Reputation: 1005

Bug with jQuery Mobile Link/Button on Click

If I have a link in my jQuery Mobile app, and make it a button with .button();. If I click on the text (center of the button), it will not throw the event "click".

Here is an example: http://jsfiddle.net/9rZHg/

Run this script, and try aiming for the text. The alert popup will not show up. It will work only if you click on other parts of the button.

The same occurs while testing on the device.

Is there an easy way to avoid this, or do I have to use <button> tags everywhere in my app ?

Thank you

Upvotes: 3

Views: 1423

Answers (2)

Wilto
Wilto

Reputation: 1186

Developer on the jQuery Mobile project, here.

While the fix above may temporarily patch the issue for the time being, the fundamental issue is that the button() plugin is intended for button elements and inputs. Adding the data-role="button" attribute or calling the buttonMarkup() plugin instead will prevent this issue.

Upvotes: 5

Jasper
Jasper

Reputation: 76003

I have not created buttons like that before but the problem is with the z-index of the <a> element. If you add the following CSS to your page then you will be able to click on any part of the button to get the click event to fire:

/*place the hidden link on top of the button UI*/
.ui-btn-hidden {
    z-index : 2;
}

This issue does not occur when you use data-role="button" on the <a> tag like so:

<a href="" data-role="button">A tag w/ data-role="button"</a>

Here is a jsfiddle of both of these solutions: http://jsfiddle.net/jasper/9rZHg/1/

Upvotes: 2

Related Questions