我正在处理移动页面更改事件时传递查询字符串值并按预期检索值。但是当我单击后退按钮时，当前页面和上一页同时触发时转到上一页。如何克服这个问题
这是我的代码：
page1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).bind('pageinit','div:jqmData(role="page")', function(){
$("#searchbutton").on('click',function(){
///alert("working");
var searchvalue = $("[name='clientsearch']").val();
var searchbyvalue = $("#select-choice-searchby").val();
var statusvalue = $("#select-choice-status").val();
if(searchvalue.length!=0){
$.mobile.changePage(
'accountlist.html',
{
//dataUrl : "accountlist.html?searchvalue="+searchvalue&"searchbyvalue="+searchbyvalue&"statusvalue="+statusvalue ,
data : { 'searchvalue' : searchvalue,'searchbyvalue':searchbyvalue,'statusvalue':statusvalue },
reloadPage : false,
changeHash : true,
});
}
else{
$( "#confirm" ).popup( "open" );
}
});
});
</script>
</head>
<body>
<div data-role="page" id="client" >
<script type="text/javascript">
$(document).on("pageshow", function(){
var prevSelection = "tab1";
$("#navbar ul li").on("click",function(){
var newSelection = $(this).children("a").attr("data-tab-class");
$("."+prevSelection).addClass("ui-screen-hidden");
$("."+newSelection).removeClass("ui-screen-hidden");
prevSelection = newSelection;
});
});
</script>
<div data-role="header" data-theme="b" data-position="fixed" data-id="persistantFooter">
<a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
<h1>Client View</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchbox">
<input type="search" name="clientsearch" value="" data-inline="true" data-mini="true"/>
<a href="#" data-role="button" data-theme="b" data-inline="true" id="searchbutton" data-ajax="false" data-mini="true" >Search</a>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-searchby" class="select searchby" data-inline="true" style="text-align:right">Search By:</label>
<select name="select-choice-searchby" id="select-choice-searchby" data-mini="true" data-role="none" style="margin-left:30px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;
height: 28px;">
<option value="account">Account</option>
<option value="customhouseholds">Custom Households </option>
<option value="roahouseholds">ROA Households</option>
</select>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-status" class="select status" data-inline="true" style="text-align:right!important" >Status:</label>
<select name="select-choice-status" id="select-choice-status" data-mini="true" data-role="none" style="margin-left:58px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;height: 28px;">
<option value="open">Open</option>
<option value="closed">Closed </option>
<option value="all">All</option>
</select>
</div>
<div data-role="navbar" id="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-tab-class="tab1">Favorites</a></li>
<li><a href="#" data-tab-class="tab2">Recents</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab1">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div><!--/demo-html -->
</div>
<div class="tab2 ui-screen-hidden">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="confirm" data-role="popup" data-theme="none">
<p id="question">Please Give Some Value</p>
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data- transition="flip" data-theme="b" data-rel="back">Ok</a>
</div><!-- /popup -->
</div>
</body>
</html>
page2.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Account view</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="accountlist" data-prefetch>
<script src="js/sai.js"></script>
<div data-role="header" data-theme="b">
<a href="#" data-icon="back" data-rel="back" data-ajax="false" data-direction="reverse" title="Go back">Back</a>
<h3>Account View</h3>
</div>
<div data-role="content">
<ul id="list" data-role="listview" >
</ul>
</div> <!--content-->
</div><!--page-->