Jquery移动按钮点击角落不起作用

Posted

技术标签:

【中文标题】Jquery移动按钮点击角落不起作用【英文标题】:Jquery mobile button click at corner not working 【发布时间】:2014-09-09 14:50:54 【问题描述】:

我使用 cordova 和 jQuery mobile 作为 UI 框架创建了一个移动应用程序。它工作正常,只是在单击角落时不会触发 jQuery 移动按钮上的单击事件。单击角落时,我看到悬停效果(按钮颜色更改),但未触发单击事件。当从按钮角向内点击一点时触发点击事件。

我正在使用 jQuery 移动版 1.4.2。下面是我的按钮(带有类 showOptions 和 ui-btn 的锚标记)标记和单击处理程序:

<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
    <h1 class="ui-title">All Packages</h1>
    <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
        <a href="#" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>
    </div>
</div>


$('.showOptions').on('click', function() 
    console.log('button clicked');
    return false;
);

有没有人也面临同样的问题?请帮帮我。

【问题讨论】:

你的 showOptions 类有任何 CSS 规则吗?还是只是用作点击处理程序的选择器? @ezanker 就像一个选择器。没有添加 CSS 规则。 【参考方案1】:

与其使用&lt;button&gt;&lt;input type="submit"&gt;,不如使用&lt;a&gt;(像你一样)和data-role="button" 属性。

<a href="#" data-role="button" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>

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

【讨论】:

但是,你已经明确提到了 ui-btn 类。如果我使用 data-role="button" 是否应该删除它?? 尝试使用data-role="button"。不起作用:(我看到悬停效果但没有点击。 尝试删除你所有的类和 div 并且只测试:Button 还是一样。没有运气。

以上是关于Jquery移动按钮点击角落不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery按钮单击事件不起作用

制作一个与 jquery 反应的切换按钮不起作用

使用带有 jquery 的按钮的内容过滤器仍然不起作用?

为啥我的 jQuery Mobile 代码不起作用?

jquery:重置后禁用/启用按钮不起作用

Jquery livequery“点击”不起作用