2

我正在使用 jQuery mobile 1.3.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 回答