【发布时间】：2014-05-10 15:55:38
【问题描述】：
我不熟悉 jQM 以及 AJAX。
我有一个网站，它保留静态页眉和页脚，并将#mainContent div 替换为外部 .html/.php 页面。
我发现当我单击一个导航栏选项卡（包含在标题中）时，#mainContent 被另一个页面替换，jQuery Mobile 样式（按钮、下拉菜单、等）不会立即加载。
最初出现按钮的默认样式，然后（如果加载 AJAX）一秒钟后页面执行“刷新类型闪烁”，并且按钮被替换为 jQM 样式版本。
有时我会卡在 AJAX 的“加载圈”中，并且按钮会保留其原始样式，直到再次按下“导航栏链接”为止。
我知道这样做是有充分理由的。
研究表明，使用“$(document).ready(function() { .... });”不适合 jQM。我在导航脚本中将其替换为“$(document).bind('pageinit', function() { .... });”，这并没有真正产生影响（尽管导航按钮仍然有效）。
这是我的 index.php 的基本脚本初始化
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
<div class="main">
<p/>
content here.\
</div>
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer" id="footer">
<?php
require_once('../account.php');
if ($account == "_")
{
echo "Not logged in";
} else {
echo "Logged in as " . $account;
}
?>
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
我的 navScript.js：
$(document).bind('pageinit', function() {
$("#coursesButton").on("click", function(e) {
//e.preventDefault();
//alert('courses');
$("#mainContent").load("./pages/courses.html");
});
$("#searchButton").on("click", function(e) {
//e.preventDefault();
//alert('search');
$("#mainContent").load("./pages/search.html");
});
$("#submitButton").on("click", function(e) {
//e.preventDefault();
//alert('submit');
$("#mainContent").load("./pages/submit.html");
});
$("#accountButton").on("click", function(e) {
//e.preventDefault();
//alert('account');
$("#mainContent").load("./pages/accountPage.php");
});
});
然后这是我加载的外部页面之一。这是按钮样式无法正确加载的地方...（search.html）：
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="content" class="ui-content" id="mainContent">
<div class="wrap">
<div class="main">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<form method="POST" action="./search_result.php">
<legend><h3>Course:</h3></legend>
<select name="course" id="customSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
</fieldset>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p/>
<input type="submit" value="Go">
</fieldset>
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
如果您能告诉我为什么在 jQuery-Mobile 样式覆盖标准 HTML5 样式之前需要一秒钟来“刷新”，我将不胜感激。
我感觉这是由于脚本/样式被加载了两次（即在 index.php 和 search.html 中），但如果我不在每个页面中加载它们，那么按钮就不会被风格化...
虽然不会真正影响基本功能，但它确实让 Web 应用看起来非常滞后。
干杯。
【问题讨论】：
标签： javascript jquery html css jquery-mobile