单击边框时，将click事件绑定到jquery移动按钮不起作用
[英]Binding the click event to jquery mobile buttons is not working when clicking the border
问题描述
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/ 我创造了一个小提琴来说明我的问题： 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: 使用以下JavaScript代码：
$('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. 将click-event绑定到按钮时，单击按钮的边框时不会触发此事件。 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. 在设计时，没有.ui-btn，因为它稍后由框架添加。 I don't want to care about, whats internally done by the lib. 我不想关心，这是由lib内部完成的。 Is there a way to tell jQuery Mobile to reassign the events, attributes, css-classes etc. to the containing element of my button? 有没有办法告诉jQuery Mobile将事件，属性，css-classes等重新分配给我按钮的包含元素？
4 个解决方案
解决方案1
2 已采纳 2013-08-13 16:24:43
Instead of using <button> or <input type="submit"> , use <a> with data-role="button" attribute. 不使用<button>或<input type="submit"> ，而是使用<a> with data-role="button"属性。
<a href="#" data-role="button" data-icon="check">Button</a>
Anchors with data-role=button dont get wrapped with a .ui-btn div. 带有data-role=button锚点不会被包含.ui-btn div。 Hence, you have will have the whole button responsive to any event. 因此，您将拥有响应任何事件的整个按钮。
解决方案2
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. 事实上，事件并没有在大约1-2 px的边界上被触发，我认为这是由于jQuery Mobile管理你的按钮并创建最终组件的方式，可能是他们在你的初始按钮周围创建一个特殊的边框，这不是一部分的按钮。
All in all, I don't think this is a problem because no user will click around 1 to 2 px on the border. 总而言之，我不认为这是一个问题，因为没有用户会在边框上点击大约1到2像素。
解决方案3
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! 这是构成按钮的实际组件，也许这解释了问题..看看事件是否触发button元素，周围的div或其他东西会很有趣！
<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>
解决方案4
0 2013-08-14 08:02:57
I've found another CSS-only solution now: 我现在找到了另一个仅限CSS的解决方案：
.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. 但是，我会保留我接受的答案，因为这个答案不需要对jQueryMobile本身进行任何修改。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.