Jquery移动Android应用程序 - 呈现的元素与点击/点击区域不对齐

时间:2015-01-16 09:52:20

标签: android jquery cordova jquery-mobile

我在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中渲染元素与点击/点按区域对齐的地方。对我来说,这就像我需要在显示面板后刷新页面一样。

其他信息,如果有用:

  • 该应用仅用于Android 2.3.1和4.0.3
  • PhoneGap / Cordova版本2.9.0
  • jQuery v1.11.1
  • jQuery Mobile 1.4.5

0 个答案:

没有答案