Jquery Mobile - 標題中的彈出式菜單

Question

我在JQM頁面中有以下標題，當點擊option時有彈出式菜單。

<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中使用。如何解決攻絲問題？

THanks

Answer 1

在我的建議你必須停止事件冒泡。在jQuery你可以這樣做的：

e.stopPropagation(); 

所以我的建議寫菜單鏈接彈出的click事件的處理函數。

請在JQM web視圖頁面

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

這一變化，並更好地綁定在你的。就緒鏈接（），你應該儘量避免在DOMJavascript代碼更好的可維護性。

$('#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'); 
    }); 
});