我有一个名为 index.html 的页面,当我单击 index html 中的链接时,它将导航到另一个页面,其中 Listview 填充了从服务器获取的数据。这工作没有任何错误。
但是,当我单击当前页面的后退按钮时,我将被引导到上一页。
我的问题是,它刷新当前页面,然后返回上一页。我需要防止这种情况。
索引.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: true, changeHash: true
});
});
});
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
</body>
</html>
推文.html
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
$(document).bind('pagebeforeshow', '#twitterPage', function(){
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>