jQuery Mobile Panel не закрывается при нажатии

Question

У меня есть приложение PhoneGap, в котором используется многостраничный макет jQuery Mobile. На каждой странице (страница A и стр. B) у меня есть навигационная панель для переключения между страницами. Никакого пользовательского кода. У меня также есть панель на каждой странице, которая открывается, нажав кнопку «новый» в заголовке.

Иногда бывает, что я нажимаю кнопку (возможно, мягкую? Или быстро?), Чтобы открыть панель, но кнопки просто изменяют ее состояние на «активное», и панель не открывается. Я больше не могу нажимать кнопку. Когда я меняю страницу и возвращаюсь (все с помощью навигационной панели), страница A снова появляется, и теперь панель открывается. Это странное поведение, но может быть правдоподобным. Но пытаться закрыть его сейчас просто невозможно. Щелчок одной из кнопок на панели неактивен, щелкая по самой странице. Все это, кажется, замерзло.

<div data-role="page" id="one"> 
     <div data-role="header" data-transition="fixed"> 
      <a href="#panel_one" data-role="button" data-icon="grid">New</a> 
      <h1 class="header">myApp</h1> 
      <a href="#popup_one" data-role="button" data-rel="popup" data-icon="gear" data-iconpos="notext" data-corners="false" class="ui-btn-right" data-transition="slidedown" onclick="menu();">Options</a> 
     </div> 
     <!-- Header --> 

     <div data-role="panel" id="panel_one"> 
      <div data-role="collapsible-set" class="menu"></div> 
     </div> 
     <!-- Panel --> 

     <div data-role="content"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li> 
        <li><a href="#two" data-transition="none" >B</a></li> 
       </ul> 
      </div> 

     </div> 
     <!-- Content --> 
    </div> 
    <!-- Page One--> 

    <div data-role="page" id="two"> 
     <div data-role="header" data-transition="fixed"> 
      <a href="#panel_two" data-role="button" data-icon="grid">New</a> 
      <h1 class="header">myApp</h1> 
      <a href="#popup_two" data-role="button" data-rel="popup" data-icon="gear" data-iconpos="notext" data-corners="false" data-transition="slidedown" class="ui-btn-right" onclick="menu();">Options</a> 
     </div> 
     <!-- Header --> 

     <div data-role="panel" id="panel_two"> 
      <div data-role="collapsible-set" class="menu"></div> 
     </div> 
     <!-- Panel --> 

     <div data-role="content"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#one" data-transition="none">A</a></li> 
        <li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li> 
       </ul> 
      </div> 
     </div> 
     <!-- Content --> 
    </div> 
    <!-- Page Two--> 

menu() создает содержание меню, которое не показано в примере. Другой метод (loadPanel()) находится на странице show-event и заполняет боковую панель кнопками. каждая кнопка будет исполнять

var pageId = $.mobile.activePage.attr("id"); 
$("#panel_" + pageId).panel('close'); 

прежде чем что-либо еще выполнено. Тем не менее, все это работает большую часть времени, и я просто хотел бы узнать, наблюдали ли некоторые подобные действия.

Answer 1

В соответствии с JQuery мобильной документации

панель должна быть родственной к коллекторным, содержанию и нижних колонтитулов элементов внутри страницы JQuery Mobile. Вы можете добавить разметку панели до или после этих элементов, но не между ними.

Может быть, вы должны переместить вашу панель, потому что это может быть причиной странного поведения