jQuery Mobile：初次访问时页面未完全加载
Posted
技术标签:
【中文标题】jQuery Mobile：初次访问时页面未完全加载【英文标题】：jQuery Mobile : page not loading completely on initial visit 【发布时间】：2012-09-20 01:43:41 【问题描述】：在输入此内容之前，我查看了所有出现的类似问题，但我找不到我的问题的答案。
我正在使用 jQuery Mobile (1.1) 和 jQuery (1.7.1) 开发一个小型门户。因此，我将所有内容都放在一个页面上，并使用 data-role="page" 来处理流程转换。
目前流程是这样的：
-
用户访问主 URL
用户点击操作（“做这个”或“做那个”）
当用户单击操作时（两者都只是带有 href 的标签，指向具有 data-role="button" 的另一个文件），它会将他们带到该页面就好了。
但是，当第一次访问该页面时（通过手动输入 URL 或单击操作按钮/链接），表单是空的，单击提交按钮不会执行任何操作。刷新页面后，尽管一切正常。
因此，例如有人点击操作链接 #1（“付款”）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<title>Credit Card Payments</title>
<style>
.ui-dialog .ui-header a[data-icon=delete] display: none;
</style>
<script>
$(document).bind("mobileinit", function()
);
</script>
</head>
<body>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b" data-content-theme="b">
<h1>Destination</h1>
</div>
<div data-role="content" data-theme="b" data-content-theme="b">
Please choose what you would like to do:
<a href="payment.php" data-role="button">Make A Payment</a>
<a href="create.php" data-role="button">Add Credit Card To Account</a>
</div>
</div>
</body>
</html>
将他们带到“payment.php”并显示页面ID“step1”，这是一个简单的登录表单：
<div data-role="page" id="step1">
<div data-role="header">
<h2>Log In</h2>
</div>
<form id="step1frm">
<div data-role="fieldcontain">
<label for="mail">Blesta e-mail: </label>
<input type="text" name="mail" id="mail" />
</div>
<div data-role="fieldcontain">
<label for="pw">Blesta password: </label>
<input type="password" name="pw" id="pw" />
</div>
<input type="button" id="step1frmsub" value="Log In" />
</form>
</div>
登录表单页面也有很多 jQM 的东西，但是在我注释掉所有代码之后，它并没有改变任何东西，所以这不是原因。我还通过 W3.org 验证了 HTML，它返回有效。
可以在我为 Chrome 的 Inspector 拍摄的屏幕截图中找到对正在发生的事情的更好表示：
首次访问 - after clicking "make a payment"
刷新页面后 - after refreshing the login for "make a payment"
编辑 - 作为一个小的跟进，我注意到在加载时在 div 页面上设置了“data-external-page="true"”，然后在刷新时它不再存在。根据我对所读内容的理解，这是因为它基本上来自一个对话框，但我不确定是否有办法禁用它。
答案 - 好吧，在最初认为这不是我想要的东西之后，解决方案实际上是将其添加到我的链接中：
rel="external"
所以它们看起来像这样：
<a href="payment.php" data-role="button" rel="external">Make A Payment</a>
【问题讨论】：
我看到你已经回答了你自己的问题！使用该信息创建此问题的新答案并将其标记为已接受的答案。 :-) 【参考方案1】：这个问题的解决方案，在最初认为这不是我想要的之后，实际上是将它添加到我的链接中：
rel="external"
所以它们看起来像这样：
<a href="payment.php" data-role="button" rel="external">Make A Payment</a>
【讨论】：
以上是关于jQuery Mobile：初次访问时页面未完全加载的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 和 Google Maps API - 地图未加载到设备上
jQuery Mobile：在完全加载时修改 DOM 以使页面高度为 100%
Jquery Mobile：“pageshow”事件仅在 Shift F5（完全重新加载）时触发，但在加载另一个页面或具有不同查询的同一页面时不会触发