后退按钮在jQuery Mobile中不起作用
[英]back button is not working in jquery mobile
问题描述
Hi I have two html files index.html and test.html In both files I have added back button as data-rel="back" when i go from index to test then on test.html when I click back button then it is not navigate to index.html . 
嗨，我有两个HTML文件index.html和test.html，在两个文件中，当我从索引进行测试时，我都将后退按钮添加为data-rel="back" ，然后在我单击后退按钮时在test.html上添加了后退按钮，导航到index.html。 My index file is as: 我的索引文件是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div id="searchpage" data-role="page" data-theme="b" data-role="content" data-add-back-btn="true">
<div data-role="header" align="center">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>index page</h1>
<a href="MainMenu.html" data-icon="grid">Menu</a>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
<input type="text" name="stock" id="enterstock" value="" />
<input type="submit" id = "verify" data-role="button">
</div>
<script type="text/javascript">
$("#verify").click(function (e)
{
e.stopImmediatePropagation();
e.preventDefault();
window.location = "Test.html";
//$.mobile.changePage('Test.html')
});
</script>
</div>
</body>
</html>
My test.html is as: 我的test.html是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div id="cash" data-role="page" data-theme="a" data-role="content" data-add-back-btn="true">
<div data-role="header" align="center">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>Test page</h1>
<a href="MainMenu.html" data-icon="grid">Menu</a>
</div>
<h1>Testing</h1>
</div>
</body>
</html>
If I use $.mobile.changePage('Test.html') then back button works fine but with window.location = "Test.html"; 如果我使用$.mobile.changePage('Test.html')则返回按钮可以正常使用，但window.location = "Test.html"; it is not working. 它不起作用。 Why is it so? 为什么会这样呢？ In blackberry5 changePage is not work hence I cant use it. 在blackberry5中，changePage无法正常工作，因此我无法使用它。 Any suggestion will be appreciated. 任何建议将不胜感激。 Thanks in advance 提前致谢
3 个解决方案
解决方案1
1 2012-07-24 06:06:07
data-rel = "Back" works with navigation stack build based on single html pages. data-rel =“ Back”可用于基于单个html页面的导航堆栈构建。
Add your pages into same html file. 将页面添加到相同的html文件中。 It apply page enhancement on demand. 它根据需要应用页面增强。 That is even though two pages are in same html second page don't load to dom until you change to that page. 即使在同一个html第二页中有两个页面也不会加载到dom，除非您切换到该页面。
I guess when you try to play with two htmls dom is not supposed to behave like that. 我猜想当您尝试使用两个htmls dom时不应表现出这种行为。 Isn't it. 是不是
Place two pages on same html. 将两个页面放在相同的html上。 Thats how they recommend of you want to rely on inbuilt navaigation system. 那就是他们建议您依靠内置导航系统的方式。
Your page format is not correct either. 您的页面格式也不正确。 Follow a good tutorial first. 首先遵循一个好的教程。
解决方案2
0 2012-08-01 21:10:49
As noted, data-rel="back" is for pages within a single HTML page. 如前所述，data-rel =“ back”用于单个HTML页面中的页面。
However, you can try to use the history.back() function. 但是，您可以尝试使用history.back（）函数。 That should simulate the "Back" button on the browser, so if that's the behavior you're looking for, it should work. 那应该模拟浏览器上的“后退”按钮，因此，如果这是您要寻找的行为，它应该可以工作。 Give it a try! 试试看！
解决方案3
0 2015-06-03 05:07:27
Use the following code in click event 在点击事件中使用以下代码
window.history.back();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.