除非刷新，否则链接无法工作 [英] Link fails to work unless refreshing
问题描述
我目前正在使用JQuery mobile开发一个移动网站.我正在使用多个页面，而foobar.html的导航如下:
I am currently developping a mobile website using JQuery mobile. I am using multiple pages whitin my foobar.html to navigate as follow :
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
<script src="jquery-js/jquery-1.10.1.js"></script>
<script src="jquery-js/jquery.mobile-1.3.1.js"></script>
<title>Foobar</title>
</head>
<body>
<div data-role="page" id="foo">
<div data-role="content">
<a href="#bar" data-role="button">Go to Bar</a>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="content">
<p>Bar</p>
</div>
</div>
</body>
我加载了foobar.html文件，单击转到栏，它可以正常工作；但是，当我从index.hmtl导航到foobar.html并再次对其进行测试时，该链接无法正常工作.刷新页面即可解决问题.
I load the foobar.html file, click on Go to Bar and it works fine ; however, when I navigate from index.hmtl to foobar.html and test it again, the link fails to work. Refreshing the page solves the problem.
什么能解释这种行为以及如何解决呢?
What would explain this behavior and how to fix it?
推荐答案
说明
使用 jQuery Mobile 和多个HTML文件时，重要的是要了解当您从 index.html 转到 foobar.html 时> * ONLY *第一页将被加载.基本上，jQuery Mobile将剥离页面的其余部分，包括 HEAD 和其余的 BODY 内容.
Explanation
When working with jQuery Mobile and multiple HTML files it is important to understand that when you go from index.html to foobar.html *ONLY* first page will be loaded. Basically jQuery Mobile will strip rest of the page, including HEAD and rest of the BODY content.
因此，当处理多个 HTML 页时，只有第一页可以具有多个内页，所有其他 HTML 页只能具有 强> 1页.在您的情况下，只有页面 #foo 被加载到DOM中，页面 #bar 被丢弃了.
So when working with several HTML pages, only first page can have several inner pages, all other HTML pages can have ONLY 1 page. In your case only page #foo was loaded into the DOM, page #bar was discarded.
此外，我还有另一个 ARTICLE ，其中描述了 jQuery Mobile 如何处理多个HTML页面加载.
Also, I have another ARTICLE where is described how jQuery Mobile handles multiple HTML page loading.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS Declaration -->
<meta charset="UTF-8">
<title>TEst</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#foo', function(){
alert($('#body-test').html());
});
</script>
</head>
<body id="body-test">
<div data-role="page" id="portfolio" data-add-back-btn="true">
<div data-role="content" data-theme='c' >
<a href="test.html" data-role="button">Go to Bar</a>
</div>
</div><!-- Page Project #1 -->
</body>
</html>
test.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
<script src="jquery-js/jquery-1.10.1.js"></script>
<script src="jquery-js/jquery.mobile-1.3.1.js"></script>
<title>Foobar</title>
</head>
<body>
<div data-role="page" id="foo">
<div data-role="content">
<a href="#bar" data-role="button">Go to Bar</a>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="content">
<p>Bar</p>
</div>
</div>
</body>
</html>
如果运行此示例，它将告诉您(警告您)仅加载#foo页.
If you run this example it will tell you (alert you) that only page #foo is loaded.
这篇关于除非刷新，否则链接无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
