[英]Binding the click event to jquery mobile buttons is not working when clicking the border
这是我的第一个问题，我希望我已经做了足够的研究，以确保它之前没有得到过。 我想知道没有其他人有这个问题。
我创造了一个小提琴来说明我的问题： 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>
使用以下JavaScript代码：
$('button').click(
function() {
$('.ui-content').append('click ');
}
);
将click-event绑定到按钮时，单击按钮的边框时不会触发此事件。 但是风格的下降状态被触发了。
我不喜欢这样的结构：
$('button').closest('.ui-btn').click(...)
因为它不是真正流动的。 在设计时，没有.ui-btn，因为它稍后由框架添加。 我不想关心，这是由lib内部完成的。 有没有办法告诉jQuery Mobile将事件，属性，css-classes等重新分配给我按钮的包含元素？
不使用<button>或<input type="submit"> ，而是使用<a> with data-role="button"属性。
<a href="#" data-role="button" data-icon="check">Button</a>
带有data-role=button锚点不会被包含.ui-btn div。 因此，您将拥有响应任何事件的整个按钮。
事实上，事件并没有在大约1-2 px的边界上被触发，我认为这是由于jQuery Mobile管理你的按钮并创建最终组件的方式，可能是他们在你的初始按钮周围创建一个特殊的边框，这不是一部分的按钮。
总而言之，我不认为这是一个问题，因为没有用户会在边框上点击大约1到2像素。
这是构成按钮的实际组件，也许这解释了问题..看看事件是否触发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>
我现在找到了另一个仅限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;
}
但是，我会保留我接受的答案，因为这个答案不需要对jQueryMobile本身进行任何修改。
重复单击时单击事件中的jQuery scrollTop无法正常工作
[英]jQuery scrollTop in click event not working properly when clicking repeately
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.