【发布时间】：2015-08-04 01:21:57
【问题描述】：
我正在创建一个小型 jQuery Mobile 应用程序。我有一个带有横幅图像的主页，从 json 文件加载的段落，以及指向具有链接列表的第二页的链接，该链接也从 json 文件加载。
首页：
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
#banner {
height: 175px;
overflow: hidden;
position: relative;
}
#banner img {
display: block;
position: absolute;
bottom: 0;
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
.bold {
font-weight: bold;
border-bottom: 1px dotted;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function getLocations(data) {
var locations = data.stationBeanList;
var numLocations = 0;
var numBikes = 0;
for (var i = 0; i < locations.length; i++) {
if (locations[i].statusValue === 'In Service' && locations[i].availableBikes > 0) {
numBikes += locations[i].availableBikes;
numLocations++;
}
}
var message = '<p>There are a total of <span class="bold">' + numBikes + ' bikes</span> available in <span class="bold">' + numLocations + ' locations</span>.</p>';
$("#home-content-heading").after(message);
}
$(document).on("pagecreate", "#home", function() {
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: getLocations,
error: function() { console.log( 'Error...' ); }
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li><a href="">Home</a></li>
<li><a href="reports.html">Reports</a></li>
<li><a href="locations.html">Locations</a></li>
</ul>
</div>
<div id="home-header" data-role="header" data-position="fixed" data-theme="b">
<h1>Home</h1>
<a href="#main-nav" class="ui-btn-left ui-btn ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
</div>
<div id="banner"><img src="bicycle-rental-dock.jpg" alt="A bicycle rental dock" /></div>
<div role="main" id="home-content" class="ui-content">
<h1 id="home-content-heading">BikeShare</h1>
<a href="locations.html" class="ui-btn ui-shadow" data-transition="slide">View Locations</a>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #home -->
</body>
</html>
带有链表的第二页：
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate", "#locations", function() {
function loadData(data) {
var locations = data.stationBeanList;
var list = '';
for (var i = 0; i < locations.length; i++) {
list += '<li><a href="">' + locations[i].stationName + '</a></li>';
}
$("#location-list").append(list).listview('refresh');
}
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: loadData,
error: function() { console.log('Failed to load bikeshare.json'); }
});
});
</script>
</head>
<body>
<div data-role="page" id="locations">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li><a href="index.html">Home</a></li>
<li><a href="reports.html">Reports</a></li>
<li><a href="">Locations</a></li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Locations</h1>
<a href="#main-nav" class="ui-btn-left ui-btn ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
</div>
<div role="main" class="ui-content">
<ul id="location-list" data-role="listview"></ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #locations -->
</body>
</html>
我遇到的问题是，当我单击链接并转到第二页时，除非我点击浏览器刷新按钮，否则不会显示列表视图（来自 json 文件）。如果我点击刷新然后点击浏览器后退按钮，则第一页上的横幅没有应用自定义 css，此外，之前从 json 文件加载和显示的数据不再存在。我看不出我的代码哪里出错了。任何帮助表示赞赏。
【问题讨论】：
标签： javascript jquery jquery-mobile