1

私が持っているもの

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>

起こっていると思うこと

この問題は、ポップアップの ID が同じである可能性があることを読みましたか? これらは 2 つの異なるページであるため、意味がありません。

ポップアップが<div role="page">

lapieuvreの問題（手元にある同様の問題への返信）は、まったく同じシナリオです：https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page

どんなフィードバックでも大歓迎です

4

3 に答える 3

2

答えをまとめると：

ポップアップのIDが同じだからです。jQuery Mobile が動作する方法を理解していれば、それは理にかなっています。AJAX を介して HTML パーシャルを取得し、一種のシングル ページ アプリケーションを作成します。

アイデア全体である AJAX を使用するのが最善です。できれば ID を変更して、親ページを識別するためのプレフィックスを付けてください。これがその方法です。乾杯！

于 2014-10-07T19:04:18.663 に答える
2

この投稿を見つけたとき、私は同じ問題を調査していました。私にとってうまくいったのは、ポップアップ div を外部ツールバーに配置することでした: http://demos.jquerymobile.com/1.4.4/toolbar-external/

「ページ内にないツールバーは、Ajax ナビゲーション中に DOM に取り込まれません。」そうすれば、同じ ID を持つ複数の div がなくなります。

于 2014-10-23T16:30:36.093 に答える