Javascript 单击边框时,将单击事件绑定到jquery mobile按钮不起作用
这是我的第一个问题,我希望我已经做了足够的研究,以确保它以前没有被使用过。我想知道没有其他人有这个问题 我用小提琴来说明我的问题: 将单击事件绑定到按钮时,单击按钮边框时不会触发此事件。但会触发样式的关闭状态 我不喜欢这样的结构:Javascript 单击边框时,将单击事件绑定到jquery mobile按钮不起作用,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,这是我的第一个问题,我希望我已经做了足够的研究,以确保它以前没有被使用过。我想知道没有其他人有这个问题 我用小提琴来说明我的问题: 将单击事件绑定到按钮时,单击按钮边框时不会触发此事件。但会触发样式的关闭状态 我不喜欢这样的结构: $('button').closest('.ui-btn').click(...) 因为它不是真正的流体。在设计时没有.ui btn,因为它是稍后由框架添加的。我不想关心lib内部做了什么。有没有办法告诉jQuery Mobile将事件、属性、css类等重新分配给我
$('button').closest('.ui-btn').click(...)
因为它不是真正的流体。在设计时没有.ui btn,因为它是稍后由框架添加的。我不想关心lib内部做了什么。有没有办法告诉jQuery Mobile将事件、属性、css类等重新分配给我的按钮的包含元素?事实上,事件并没有在大约1-2像素的边界上触发,我认为这是由于jQuery Mobile管理按钮并创建最终组件的方式,它们可能会在您的初始按钮周围创建一个特殊的边框,该边框不是按钮的一部分
总而言之,我不认为这是一个问题,因为没有用户会在边框上单击大约1到2像素。这是组成按钮的实际组件,也许这就解释了问题。。 查看事件是否触发
按钮
元素、周围的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>
单击我的边界
单击我的边界
使用
带有data role=button
的锚点不会被.ui btn
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本身进行任何修改。每当我的光标变成手时,单击事件就会触发。对不起,我看不出有什么问题。@DevlshOne那么你做得不对。单击最外面的像素边框,单击
文本将不会显示appended@Ian你是说按钮的阴影吗?这东西对我很有用。边框是1像素宽。在该边框中,蓝色辉光效果缺失,且不会触发单击。您可以看到手部光标和向下效果(无光晕)。目前正在使用firefox。@Omar omg,真的。非常感谢,这会有帮助的。如果你想得到一个被接受的答案,请提供它作为一个答案。我们使用鼠标界面的用户多次报告这个问题,因为一些按钮在第一次点击时不起作用。当使用纯触摸设备时,这并不重要。event.target是-Element.Bummer。。。也许你对此无能为力。除此之外,将其视为禁用的按钮,并在其周围创建一个假span,带有id
,可以包含在选择器中。click()
选择器。我尝试了这个方法,但它还有其他缺点:按钮可以由ui设置样式(noicon,浮动,在网格内),我的外部div没有主题化。如果我在这里找不到解决方案,我想我必须打开一个bug跟踪器条目。
<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>
<a href="#" data-role="button" data-icon="check">Button</a>
.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;
}