我正在使用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的刀片在服务器端创建这些页面。
提前致谢。
尝试时我认识到了;当我在开始工作后点击打开面板按钮时,它会打开上一页面板而不是活动页面面板。我在浏览器上使用了上一页按钮,看到它正在控制上一页的面板。我该如何解决这个问题?
答案 0 :(得分:2)
$(document).on('pagehide', function(event, ui){
var page = $(event.target);
page.remove();
});
此代码通过删除要隐藏的页面解决了我的问题。