我在Android上通过Phonegap运行基于jQuery移动的应用程序。一切正常,但我对动态加载面板中包含的按钮有一个奇怪的问题。基本上,如果您尝试点击一个按钮,则会点击屏幕下方的按钮。它就像在屏幕上呈现的内容实际上并不与按钮的位置对齐。
例如,如果我点击" A"下面," B"会开枪。
*** A ***
*** B ***
*** C ***
现在它没有发生每个时间,但有时候。
我的代码如下:
// for every page
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
// the following code creates the left panel (navigation) on all pages
$.mobile.activePage.find('#left_panel').remove();
$('<div>').attr({'id':'left_panel','data-role':'panel','data-display':'push'}).appendTo($(this));
$.mobile.activePage.find('#left_panel').panel();
// this loads the content of the panel
$.mobile.activePage.find('#left_panel').load('includes/left_panel.html', function() {
$.mobile.activePage.find('#left_panel').trigger("create");
$( "#main_nav" ).listview("refresh");
});
// this adds the click event to the show navigation button in the header
$(document).off('click', '#open_panel_button').on('click', '#open_panel_button', function(){
$.mobile.activePage.find('#left_panel').panel("open");
});
});
// includes/left_panel.html
<div>
<h3>Navigation</h3>
<ul id="main_nav" data-role="listview" data-inset="true">
<li><a href="#aPage">*** A ***</a></li>
<li><a href="#bPage">*** B ***</a></li>
<li><a href="#cPage">*** C ***</a></li>
</ul>
</div>
我知道这是一个非常模糊的问题,但我已经在我的应用程序中诚实地使用了这个问题几个月,我无法弄清楚如何修复它。我只是想知道这里的任何人是否经历过类似jQuery Mobile中渲染元素与点击/点按区域对齐的地方。对我来说,这就像我需要在显示面板后刷新页面一样。
其他信息,如果有用: