我不熟悉这个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中），但是如果我不在每个页面中加载它们，那么按钮就不会被风格化...
虽然没有真正影响基本功能，但它确实给网络应用带来了非常落后的外观。
干杯。
答案 0 :(得分：5)
问题是您没有初始化您通过Ajax加载的内容。当您动态加载外部数据时，您需要手动初始化任何jQuery Mobile＆＃34;小部件＆＃34;。
成功加载数据后，您只需在.enhanceWithin()上调用$("#mainContent")即可。因此，您需要使用.load()＆＃39> 回调函数来初始化这些元素。
$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
（1）点击＆＃34;课程＆＃34;或＆＃34;搜索＆＃34;按钮功能