2

jQuery モバイル 1.3.1 パネルを使用しています。2 つのパネル (左側に 1 つ、右側に 1 つ) があり、パネルを開くにはボタンがあり、同時にイベントをスワイプします。ユーザーがページを更新しない場合、すべてが正常に機能しています。ユーザーがページを更新すると、そのページでパネルを開くことができますが、パネル上のリンクをクリックして別のページにルーティングすると、パネルを開くことができなくなります (スワイプまたはボタンの両方が機能しません)。 . しかし、ページを再度更新すると、一度だけ機能し始めます。ちなみにjqmのトランジションにはajaxを使っています。理由がわかりませんでした。パネルの使用法に何か欠けていますか。これがhtmlです。

<div data-role="page">
    <div data-role="panel" id="left-panel" class="panel" data-display="push" data-position="left" data-theme="a" class="ui-response">
<div data-role="fieldcontain">
    <input type="search" name="password" id="search" value="" placeholder="search"/>
</div>
<a data-role="button" href="home">home</a>

<a data-role="button" href="settings">settings</a>
<button id="signOutButton">sign out</button>
</div><!--Left Panel-->                <div data-role="panel" id="right-panel"   class="panel" data-display="push" data-position="right" data-theme="a" class="ui-responsive">
</div><!--Right Panel-->
        <div data-role="header" data-tap-toggle="false">
                <h1>header</h1>
<button id="openLeftPanel">open</button>
<button id="openRightPanel">open</button>
        </div><!-- /header -->

        <div data-role="content"
           <p>this is home</p>

        </div><!-- /content -->
    </div><!-- /page -->

そして、これが私のjsです。

 $(document).on('pageinit', function(){
//Opening panels with swipe, if any open don't open the panel (avoid closing swipe to open other panel)
//Catch swipes


      $( document ).on( 'swipeleft swiperight', function( evt ) {
            if ( $.mobile.activePage.jqmData( 'panel' ) !== 'open' ) {
                if ( evt.type === 'swipeleft'  ) {
                    $( '#right-panel').panel( 'open' );
                } else if ( evt.type === 'swiperight' ) {
                    $( '#left-panel').panel( 'open' );
                }
            }
        });


    $(document).on('click tap', function(evt){
        $.mobile.hidePageLoadingMsg();

        var target = evt.target;
        var targetId = target.getAttribute('id');
        //Sign Out
       if(targetId === 'signOutButton'){
            window.authFunctions.deleteCookie('apiKey');
            window.location.replace('/');
            evt.stopImmediatePropagation();
            evt.preventDefault();
        }
        else if(targetId === 'openLeftPanel'){
            $('#left-panel').panel('open');
        }
        else if(targetId === 'openRightPanel'){
            $('#right-panel').panel('open');
        }

        });

サーバー側でこれらのページを作成するためにlaravelのブレードを使用しているため、コードがきれいに見えない場合は申し訳ありません。

前もって感謝します。

編集

それを試してみると、私はそれを認識しました。動作しなくなった後にパネルを開くボタンをクリックすると、アクティブなページのパネルではなく、前のページのパネルが開きます。ブラウザで前のページのボタンを使用したところ、前のページのパネルを制御していることがわかりました。この問題を解決するにはどうすればよいですか?

4

1 に答える 1

2 
 $(document).on('pagehide', function(event, ui){
    var page = $(event.target);
        page.remove();
});

このコードは、非表示になるページを削除することで問題を解決しました。

于 2013-07-11T03:54:34.823 に答える