使用 JQuery Mobile 在页面之间导航
我正在开发一个使用 JQuery Mobile 的应用程序。我的应用程序有 3 个屏幕，它们分为两个单独的 ASP.NET 文件。这些屏幕是“Page 1”、Page 2 - A”和“Page 2 - B”。这些屏幕位于以下文件中：
page1.aspx
Page 1
page2.aspx
Page 2 - A
Page 2 - B
我这样做是有原因的，我在这里提供的示例只是为了演示问题，问题是当我从第 1 页转到第 2 页 - A 时，一切正常，但是当我单击“B”时。第2页-A，屏幕不会但是，如果我在浏览器中直接导航到 page2.aspx，则可以毫无问题地导航到页面 2 - B，只有当我从 page1.aspx 开始时才会出现此问题。有人可以帮我吗，我的页面代码如下所示：
page1.aspx
<!DOCTYPE html>
<html>
<head><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script>
</head>
<body>
<form method="post" action="page1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />
</div>
<div data-role="page">
<div data-role="header"><h1>Page 1</h1></div>
<div data-role="content">
<a href="page2.aspx" data-role="button">Page 2</a></div>
</div>
</div>
</form>
</body>
</html>
page2.aspx
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript">
</script>
</head>
<body>
<form method="post" action="page2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
</div>
<div id="A" data-role="page">
<div data-role="header"><h1>Page 2 - A</h1></div>
<div data-role="content">
<a href="#B " data-role="button">B</a></div>
</div>
</div>
<div id="B" data-role="page">
<div data-role="header"><h1>Page 2 - B</h1></div>
<div data-role="content">
I can't get to this page!
</div>
</div>
</form>
</body>
</html>
I am working on an application that uses JQuery Mobile. My application has 3 screens, that are separated into two separate ASP.NET files. These screens are "Page 1", Page 2 - A", and "Page 2 - B". These screens are placed in the following files:
page1.aspx
Page 1
page2.aspx
Page 2 - A
Page 2 - B
I have reasons for doing this, the sample that I'm providing here is just to demonstrate the problem. The problem is when I go from page 1 to page 2 - A, things work. However, when I click "B" on Page 2 - A, the screen will not navigate to the page. But, here is where it gets odd. If I navigate directly to page2.aspx in my browser, I can navigate to page 2 - B with no problem. The problem only happens when I start at page1.aspx. Can someone please help me out, my code for the pages looks like the following:
page1.aspx
<!DOCTYPE html>
<html>
<head><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script>
</head>
<body>
<form method="post" action="page1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />
</div>
<div data-role="page">
<div data-role="header"><h1>Page 1</h1></div>
<div data-role="content">
<a href="page2.aspx" data-role="button">Page 2</a></div>
</div>
</div>
</form>
</body>
</html>
page2.aspx
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript">
</script>
</head>
<body>
<form method="post" action="page2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
</div>
<div id="A" data-role="page">
<div data-role="header"><h1>Page 2 - A</h1></div>
<div data-role="content">
<a href="#B " data-role="button">B</a></div>
</div>
</div>
<div id="B" data-role="page">
<div data-role="header"><h1>Page 2 - B</h1></div>
<div data-role="content">
I can't get to this page!
</div>
</div>
</form>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我认为（但没有尝试过）你需要使用
$.mobile.loadPage('testpage.html')首先将页面加载到 DOM 中，然后使用$.mobile。 changePage('#bar')进行转换。更多信息请参见：
我还看到了 target 属性的使用，但不确定这是否可以使用
$ 来工作。 mobile.changePage()另外，我认为 jQM 将此视为“深层链接”，但我发现这不是您想要完成的
I think (But have not tried this) you need to use
$.mobile.loadPage('testpage.html')to load the page into the DOM first, then use$.mobile.changePage('#bar')to transition.More on that here:
Also I've seen use of the target attribute but not sure if this would work using
$.mobile.changePage()Also I think jQM Sees this as 'Deep Linking' but I see that's not what you're trying to accomplish
您需要将外部页面标记为外部，即。 rel="external"
这将解决您的问题：
You need to mark the external page as external, ie. rel="external"
This will fix your problem:
好吧，这听起来有点奇怪。但我尝试了您的示例（通过复制您的代码示例）并遇到了与您相同的问题。但是我注意到您的页面
#B链接中有一个空格，如下所示：当我删除空格时，一切正常。尝试一下，让我知道它是否适合您。
Okay this is going to sound a bit weird. But I tried your example (by copying your codesamples) and experienced the same problem you have. However I noticed that you have a whitespace in your link to page
#B, like it is shown below:When I removed the whitespace everything worked fine. Try it out and let me know if it works for you.
您可以使用目标：target =“_self”
对我来说这是100%的工作
you can user target : target="_self"
for me it's work 100%