我设置了一个多页模板。第一个页面有一组指向内页的链接——但是除了一个链接到同一个动态加载数据的#template 页面之外，所有链接都没有。另一个链接是我在页面中构建的表单。
我遇到的问题是当您导航到其中一个链接时，继续浏览页面，然后使用后退按钮返回第一页，如果您然后单击指向表单的链接，它不会导航到 #页面，它会转到您在其他链接中的最后一页。
希望这是有道理的——也许一张图表会让它更清楚
首页 > 产品列表 > 产品详情
产品详情 > 产品列表 > 主页（返回按钮）
首页 > 联系表格
最后一步再次显示产品详细信息页面，而不是联系表格。就好像它没有清除页面一样：
我的代码（为清楚起见截断）：
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
$(document).delegate("#pageDetail", "pagecreate", function () {
$(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});
$(document).bind("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if (typeof data.toPage === "string") {
$.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var page;
var type;
var cat;
if ($.mobile.pageData && $.mobile.pageData.type) {
type = $.mobile.pageData.type;
}
if ($.mobile.pageData && $.mobile.pageData.cat) {
cat = $.mobile.pageData.cat;
}
if ($.mobile.pageData && $.mobile.pageData.page) {
page = $.mobile.pageData.page;
}
var url = $.url(data.toPage); // page url
var hash = url.fsegment(1).replace(/&.*/, ""); // nav hash for page holder
switch (hash) {
case "pageList":
$.ajax({
url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
datatype: "html",
success: function (data) {
$('.submenu').html(data);
$('.title').html(type);
$('.submenu').trigger('create');
}
});
break;
case "pageDetail":
$('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function () {
$(this).trigger('create');
});
break;
default:
break;
}
}
});
</script>
</head>
HTML 位
<body>
<div data-role="page" id="home">
<div data-role="content">
<a href="#pageList?type=products" data-transition="slide"><img src="images/Icon-Courses.png" alt="courses" /></a><br />
<a href="#contactForm" data-transition="slide"><img src="images/Icon-Contact.png" alt="contact" /></a>
</div>
</div>
<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Contact Us</h1>
</div>
<div data-role="content" class="detail">
<div id="contentdiv" style="margin:10px auto;width:90%;">
<label for="name">Your Name</label>
<input type="text" id="name" style="width:90%;" data-mini="true" />
<label for="email">Email Address</label>
<input type="text" id="email" style="width:90%;" data-mini="true" />
<label for="phone">Phone Number</label>
<input type="text" id="phone" style="width:90%;" data-mini="true" />
<label for="comments">Enquiry / Comments</label>
<textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
<br />
<input type="submit" id="submit" value="Send Enquiry Now" />
</div>
</div>
</div>
</body>
</html>
我正在使用 jqm.page.params.js 来处理查询字符串参数。
那里有什么明显的吗？#pageDetail 页面的链接在#pageList 上显示的内容中返回。
不明白为什么我似乎无法清除缓存，并且如果您先到过其他任何地方，它也无法正确导航到联系表单。如果你直接去那里它工作正常。
任何人有任何启示？顺便说一句，这需要单独使用 PhoneGap
谢谢