Question

点击option时，我的JQM页面中有以下标题以显示弹出菜单。

<div data-role="header" data-theme="a" data-position="fixed">
    <div><a href="#"><img src="custom-icon.png" class="ui-btn-left" width="32" height="32"/></a></div>

    <h1>HOME</h1>

    <a href="#main-menu" class="ui-btn-right" data-rel="popup" data-icon="grid" data-iconpos="notext">Option</a>
    <div data-role="popup" id="main-menu">
        <ul data-role="listview" data-inset="true" data-theme="a">
            <li><a href="menu1" data-theme="c">MENU 1</a>
            <li><a href="menu2" data-theme="c">MENU 2</a></li>
        </ul>
    </div>
</div>

它可以工作但有时需要在我的Android设备中多次点击。 JQM页面用于android-webview。如何解决攻丝问题？

感谢

Answer 1

在我的建议中，你必须停止事件冒泡。在jQuery中，您可以通过以下方式执行此操作：

e.stopPropagation();

因此，在我的建议中，为菜单链接弹出的click事件编写处理函数。

在JQM网页浏览页

中进行此更改

<a href="#" id="my_link" class="ui-btn-right" data-rel="popup" data-icon="grid" data-iconpos="notext">Option</a>

最好在.ready（）中绑定您的链接，为了更好的可维护性，您应该尽量避免Javascript中的DOM代码。

$('#my_link').live('tap',function(event) {
    event.stopPropagation();
    $('#main-menu').popup('open');
});

修改

$('#YOUR_PAGE_ID').live( 'pageinit',function(event){ $('#my_link').live('tap',function(event) { event.stopPropagation(); $('#main-menu').popup('open'); }); });

Jquery Mobile - 标题中的弹出菜单

1 个答案: