后退按钮不工作在jquery手机 [英] back button is not working in jquery mobile
问题描述
data-rel =back当我从索引然后在test.html上测试，当我点击返回按钮，那么它不导航到index.html。我的索引文件为： <！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =jquery.mobile/jquery.mobile-1.1.0.css/>
< link rel =stylesheethref =docs / assets / css / jqm-docs.css/>
< link rel =stylesheethref =docsdemos-style-override.css/>
< script type =text / javascriptsrc =jquery.mobile/jquery-1.7.2.min>< / script>
< script type =text / javascriptsrc =jquery.mobile/jquery.mobile-1.1.0.js>< / script>
< / head>
< body>
< div id =searchpagedata-role =pagedata-theme =bdata-role =contentdata-add-back-btn =true>
< div data-role =headeralign =center>
< a href =＃data-rel =backdata-icon =arrow-l>返回< / a>
< h1>索引页< / h1>
< a href =MainMenu.htmldata-icon =grid>菜单< / a>
< / div>
< div data-role =fieldcontainclass =ui-field-contains ui-body ui-br>
< input type =textname =stockid =enterstockvalue =/>
< input type =submitid =verifydata-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>
我的test.html是：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =jquery.mobile/jquery.mobile-1.1.0.css/>
< link rel =stylesheethref =docs / assets / css / jqm-docs.css/>
< link rel =stylesheethref =docsdemos-style-override.css/>
< script type =text / javascriptsrc =jquery.mobile/jquery-1.7.2.min>< / script>
< script type =text / javascriptsrc =jquery.mobile/jquery.mobile-1.1.0.js>< / script>
<！ - 取消注释以下行以访问PhoneGap API（不必使用PhoneGap打包Web应用程序） - >
<！ - < script type =text / javascriptcharset =utf-8src =cordova-1.6.1.js>< / script>
< / head>
< body>
< div id =cashdata-role =pagedata-theme =adata-role =contentdata-add-back-btn =true>
< div data-role =headeralign =center>
< a href =＃data-rel =backdata-icon =arrow-l>返回< / a>
< h1>测试页< / h1>
< a href =MainMenu.htmldata-icon =grid>菜单< / a>
< / div>
< h1>测试< / h1>
< / div>
< / body>
< / html>
如果我使用 $。mobile.changePage（'Test.html'） 然后后退按钮工作正常，但 window.location =Test.html; 它不工作。为什么会这样？在blackberry5 changePage不工作，因此我不能使用它。任何建议将不胜感激。提前感谢
data-rel =Back适用于基于单个HTML页面的导航堆栈构建。
将您的网页添加到同一个html文件中。它根据需要应用页面增强。这是即使两个页面在同一个html第二页没有加载到dom，直到你改变到那个页面。
我想当你尝试使用两个html时，dom不应该这样表现。不是它。
将两页放在同一个html上。
您的网页格式也不正确。先按照好的教程。
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 . 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:
<!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"; it is not working. Why is it so? In blackberry5 changePage is not work hence I cant use it. Any suggestion will be appreciated. Thanks in advance
data-rel = "Back" works with navigation stack build based on single html pages.
Add your pages into same html file. 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.
I guess when you try to play with two htmls dom is not supposed to behave like that. Isn't it.
Place two pages on same 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.
这篇关于后退按钮不工作在jquery手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
