Binding the click event to jquery mobile buttons is not working when clicking the border
Question
this is my first question and I hope I've done enough research to be sure it has not been aksed before. Im wondering nobody else has this problem.
I've created a fiddle to illustrate my problem: http://jsfiddle.net/KA54D/
<!DOCTYPE HTML>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h3>Page 1</h3>
</div>
<div data-role="content">
<button data-icon="check">Click me at my border</button>
</div>
</div>
</body>
Using the following JavaScript Code:
$('button').click(
function() {
$('.ui-content').append('click ');
}
);
When binding a click-event to a button, this event is not fired, when clicking on the border of a button. But the down-state of the style is triggered.
I don't like constructs like:
$('button').closest('.ui-btn').click(...)
because it's not really fluid. At designtime there is no .ui-btn, because it's added later by the framework. I don't want to care about, whats internally done by the lib. Is there a way to tell jQuery Mobile to reassign the events, attributes, css-classes etc. to the containing element of my button?
4 answers
solution1
2 ACCPTED 2013-08-13 16:24:43
Instead of using <button> or <input type="submit"> , use <a> with data-role="button" attribute.
<a href="#" data-role="button" data-icon="check">Button</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.
solution2
0 2013-08-13 07:00:56
Indeed the event is not fired on about 1-2 px of the border, I think this is due to the way jQuery Mobile manages your button and creates a final component, may be they create a special border around your initial button which is not part of the button.
All in all, I don't think this is a problem because no user will click around 1 to 2 px on the border.
solution3
0 2013-08-13 07:04:51
Here's the actual components that make up the button, maybe this explains the issue.. It would be interesting to see if the event triggers off of the button element, the surrounding div or something else!
<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="check" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner">
<span class="ui-btn-text">Click me at my border</span>
<span class="ui-icon ui-icon-check ui-icon-shadow"> </span>
</span>
<button data-icon="check" class="ui-btn-hidden" data-disabled="false">Click me at my border</button>
</div>
solution4
0 2013-08-14 08:02:57
I've found another CSS-only solution now:
.ui-btn button {
margin: -1px 0 0 -1px;
padding: 0 2px 2px 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
.ui-header .ui-btn button {
margin: 0;
padding: 1px 0;
left: 0px;
right: 0px;
top: 0px;
}
However, I'll keep my accepted answer, because this answer does not need any modifications to jQueryMobile itself.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.