Javascript jQuery移动样式：延迟初始化？
我对jQM和AJAX都是新手 我有一个网站，保持静态页眉和页脚，并用外部.html/.php页面替换#mainContent div 我发现，当我单击导航栏选项卡之一（包含在标题中）时，#main内容被另一个页面替换，jQuery Mobile样式（按钮、下拉菜单等）不会立即加载 最初显示默认样式的按钮，然后（如果AJAX加载）一秒钟后页面执行“刷新类型闪烁”，按钮被jQM样式的版本替换 偶尔我会被AJAX的“加载循环”卡住，按钮会保持原来的风格，直到再次按下“导航栏链接” 我知道这有一个很好的理由 研究表明，使用“$（document）.ready（function（）{…}）；”对jQM来说并不理想。我在导航脚本中用“$（document.bind（'pageinit'，function（）{…}）；”替换了它，这并没有带来什么实际的区别（尽管导航按钮仍然可以工作） 下面是我的index.php的基本脚本初始化Javascript jQuery移动样式：延迟初始化？,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,我对jQM和AJAX都是新手 我有一个网站，保持静态页眉和页脚，并用外部.html/.php页面替换#mainContent div 我发现，当我单击导航栏选项卡之一（包含在标题中）时，#main内容被另一个页面替换，jQuery Mobile样式（按钮、下拉菜单等）不会立即加载 最初显示默认样式的按钮，然后（如果AJAX加载）一秒钟后页面执行“刷新类型闪烁”，按钮被jQM样式的版本替换 偶尔我会被AJAX的“加载循环”卡住，按钮会保持原来的风格，直到再次按下“导航栏链接” 我知道这有一个很好的
<!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>
票数
课程：
全部的
通讯-2216
COMP-2121
COMP-2510
COMP-2526
COMP-2714
COMP-2721
类型：
演讲
实验室
二者都
干杯。问题在于您没有初始化通过Ajax加载的内容。动态加载外部数据时，需要手动初始化任何jQuery Mobile的“小部件” 成功加载数据后，只需在
$（“#mainContent”）.enhanceWithin（）.load（）$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
（1） 单击“课程”或“搜索”按钮问题在于您没有初始化通过Ajax加载的内容。动态加载外部数据时，需要手动初始化任何jQuery Mobile的“小部件” 成功加载数据后，只需在
$（“#mainContent”）.enhanceWithin（）.load（）$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
（1） 单击“课程”或“搜索”按钮这非常有效，谢谢。我在一些页面中仍然包含脚本，这在按钮等上造成了重复效果。删除其他脚本链接后，此问题不再发生，并且在转换页面时没有“延迟”。谢谢@不客气，我很高兴它对你有用。确保在
pagecreatepagecreate$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});