2013-07-10 79 views
2

我正在使用jQuery移动1.3.1面板。我有两个面板(一个在左边,一个在右边),并打开我的面板有按钮,同时刷卡事件。如果用户不刷新页面,一切正常。如果用户刷新页面,他可以在该页面打开面板,但是当他点击面板上的链接并路由到另一页面时,他无法再打开面板(滑动或按下它们两个都不起作用) 。但是,如果我再次刷新页面,它将再次开始工作一次。顺便说一下,我在jqm中使用ajax进行转换。我找不到原因。我在使用面板时错过了一些东西。这里是html;jqm面板在刷新页面后停止打开(编辑)

<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的刀片在服务器端创建这些页面。

在此先感谢。

编辑

当尝试它,我承认;当它在开始不工作后点击打开面板按钮时,它会打开上一页面板而不是活动页面面板。我在浏览器中使用了上一页按钮,并看到它正在控制上一页的面板。我该如何解决这个问题?

+0

删除'pageinit'绑定。它发生一次,这就是为什么他们不再工作。 – Omar

+0

你能为此做一个小提琴吗? – krishgopinath

+0

谢谢你们,我解决了这个问题。发生这种情况是因为之前的页面在缓存中。我开始删除以前的页面。在页面上隐藏。 这是我用来解决的代码; ('pagehide',function(event,ui){var page = $(event.target); page.remove(); }); – bamya

回答

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

此代码通过删除将要隐藏的页面来解决我的问题。

+0

我不知道为什么,但它也适用于我。谢谢 :) –