Reputation: 1005
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
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
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