3

这是我的第一个问题，我希望我已经做了足够的研究以确保它以前没有被问过。我想知道没有其他人有这个问题。

我创建了一个小提琴来说明我的问题：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 ');
  }
);

将单击事件绑定到按钮时，单击按钮的边框时不会触发此事件。但是触发了样式的向下状态。

我不喜欢这样的结构：

$('button').closest('.ui-btn').click(...)

因为它不是真正流动的。在设计时没有 .ui-btn，因为它是稍后由框架添加的。我不想关心，lib 内部做了什么。有没有办法告诉 jQuery Mobile 将事件、属性、css 类等重新分配给我的按钮的包含元素？

4

4 回答 4

2

代替使用<button>or <input type="submit">，使用<a>withdata-role="button"属性。

<a href="#" data-role="button" data-icon="check">Button</a>

data-role=button带有不要被.ui-btndiv包裹的锚。因此，您将拥有响应任何事件的整个按钮。

于 2013-08-13T16:24:43.940 回答
0

这是构成按钮的实际组件，也许这可以解释问题..看看事件是否触发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">&nbsp;</span>
    </span>
    <button data-icon="check" class="ui-btn-hidden" data-disabled="false">Click me at my border</button>
</div>
于 2013-08-13T07:04:51.040 回答
0

事实上，事件并没有在大约 1-2 px 的边框上触发，我认为这是由于 jQuery Mobile 管理您的按钮并创建最终组件的方式，可能是他们在您的初始按钮周围创建了一个特殊边框，这不是一部分的按钮。

总而言之，我认为这不是问题，因为没有用户会在边框上单击 1 到 2 像素左右。

于 2013-08-13T07:00:56.373 回答
0

我现在找到了另一个纯 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 本身进行任何修改。

于 2013-08-14T08:02:57.793 回答