Всплывающее окно jQuery Mobile не отображается после навигации по страницам, отображается только после жесткого обновления или возврата на ту же страницу

Что я имею

Я использую jQuery Mobile 1.4.4. Я добавил кнопку передачи в каждом заголовке, которая откроет небольшое всплывающее окно для навигации между "Выходом из системы" и "Настройками учетной записи".

Что я хочу, чтобы случилось

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

Эта проблема

На главной странице (назовите это страницей A) у меня есть эта кнопка передачи. Когда я нажимаю на него, всплывающее окно будет отображаться просто отлично. Затем я нажимаю на настройки учетной записи (назовите это страница B). Как только страница B загружена, механизм также присутствует, но не открывается всплывающее окно, как страница A. Если я обновлю страницу B, всплывающее окно с механизмом будет работать, но как только я вернусь на страницу A (с помощью кнопки "Домой"), механизм больше не будет работать, пока я не обновлюсь.

Видео описанной ситуации сценария: http://screencast.com/t/34ZrYyc4Rp2T

Код

Только заголовок и всплывающий HTML (то же самое на обеих страницах)

<body>
 <table id="top" border=0 >
 <colgroup>
    <col style="width: 33%"/>
    <col style="width: 33%"/>
    <col style="width: 33%"/>
 </colgroup>
 <tr>
     <td align="left">
         <a href="javascript:window.history.back();" data-role="button" data-icon="back" data-iconpos="notext" data-inline="true">Back</a>
     </td>
     <td id="tdTitle" align="middle" style="padding-top:10px;">
         <h2>Home</h2>
     </td>
     <td align="right">
         <a href="Home.php" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
         <a href='#settingsPopup' data-rel='popup' data-transition='pop' data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true">Settings</a>
     </td>

 </tr>
</table>  
 <div data-role='popup' id='settingsPopup' >
<ul data-role='listview' data-inset='true' style='min-width:210px;'>
    <li data-role='list-divider'>
        Settings                
    </li>
    <li>
        <a href='AccountSettings.php'>Account Settings</a>
    </li>
    <li>
        <a href='Logout.php'>Logout</a>
    </li>
</ul>
</div>

Что я думаю, что происходит

Я читал, что это может быть связано с тем, что идентификаторы всплывающих окон совпадают? Что не имеет смысла, потому что это две разные страницы.

Это также может быть случай, когда всплывающее окно заполняется в пределах <div role="page">

Проблема Lapieuvre (в ответ на аналогичную проблему под рукой) здесь точно такой же сценарий: https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page

Любая обратная связь с благодарностью

Источник

3 ответа

Решение

Подводя итог ответу:

Потому что ID всплывающих окон одинаковы. Имеет смысл, если вы понимаете, как работает jQuery Mobile, он выбирает партиалы HTML через AJAX, создавая своего рода одностраничное приложение.

Лучше всего использовать AJAX, вот и вся идея, просто измените идентификаторы, желательно, чтобы у вас был префикс для идентификации родительской страницы. Ура!

Источник

Я исследовал ту же проблему, когда нашел этот пост. Для меня работало размещение всплывающего элемента div на внешней панели инструментов: http://demos.jquerymobile.com/1.4.4/toolbar-external/

"Панели инструментов вне страницы не будут перемещаться в DOM во время Ajax-навигации". Таким образом, у вас не будет нескольких div с одним и тем же идентификатором.

Источник

Спасибо ОП за эту публикацию, так как эта проблема вызывала у меня много недоумения за пару дней. На самом деле моя проблема немного отличалась, потому что на той же странице было такое поведение, поэтому идентификатор, связанный со страницей, не решил проблему.

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

Источник
Другие вопросы по тегам