jQuery mobile：'pageinit'没有触发
Posted
技术标签:
【中文标题】jQuery mobile：\'pageinit\'没有触发【英文标题】：jQuery mobile : 'pageinit' not firingjQuery mobile：'pageinit'没有触发 【发布时间】：2014-10-10 10:20:26 【问题描述】：我在 Worklight 上使用 jQueryMobile 1.4.4。
编辑：我有一个主 html index.html，其中包含一个 div #pageContent。我想做的是在这个块中包含外部页面，以维护应该对所有应用程序通用的 index 页面的页眉/页脚和骨架。
我遇到了一个问题，即在将外部 HTML 页面加载到主页中的 div 时，未应用 Jquery 样式，因为尚未解释样式/JS。使用这个：
function wlCommonInit ()
$("#pageContent").load ("pages/login-view.html");
);
然后遵循 jquery 移动文档，以确保在呈现外部 HTML 页面之前加载主页上的所有内容，我已将其更改为：
function wlCommonInit ()
$(document).on ("pageinit", function ()
alert ("Hello there");
$.mobile.loadPage (
"pages/login-view.html"
,
"pageContainer": $("#pageContent")
)
);
但是这段代码没有被触发，警报也没有出现。
我的代码有问题吗？
【问题讨论】：
什么样的样式没有应用?????? @rajeshkakawat jQM UI（样式），阅读更多关于 jQuery Mobile 的信息。 请澄清您的问题。您想在创建当前页面 后加载另一个外部页面？或者您想在创建后将外部内容加载到当前页面？ @Omar，谢谢 :) 请参阅我的编辑。我想将外部内容加载到当前页面中。并使用index.html中包含的所有样式为新加载的内容设置样式
【参考方案1】：
要将内容加载到当前页面，请使用.load()。然而，加载的 content 需要 enhancement 来加载 jQM UI（样式）.enhanceWithin()。此方法将 jQM 样式应用于所有元素，无论其类型如何（小部件）。
$(document).on("pagecreate", "#pageID", function ()
$(".selector").on("click", function ()
$("#targetDIV")
.load("page.html #specificDIV", function ()
$(this).enhanceWithin(); /* apply styles */
);
);
);
Demo
【讨论】：
【参考方案2】：使用 jQuery Mobile，您需要替换整个 <div data-role="page" ...>。我认为你不能只替换部分内容（即保留页眉和页脚，只替换中间的内容）。
例如，在下面的代码中，sn-ps mainpage.html 的内容在应用程序启动时被加载/替换 index.html 的内容：
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="mainpage" style="padding-top: 42px !important">
<div data-role="content">
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
main.js
function wlCommonInit()
$(':mobile-pagecontainer').pagecontainer('change','pages/mainpage.html');
mainpage.html
<div data-role="page" id="mainpage" style="padding-top: 42px !important">
<div data-role="header" id="header" data-position="fixed">
<h3>jQuery Mobile Page Navigation</h3>
</div>
<div data-role="content" id="content" style="padding: 15px">
In mainpage.html
</div>
</div>
【讨论】：
谢谢。:mobile-pagecontainer 是什么意思？所以如果我理解的话，我每次都需要加载页脚和页眉，对吧？
这是在 jQuery Mobile 1.4 及更高版本中加载页面的方式。或者一种方式，我想。
所以我需要在每个页面中包含页眉和页脚 div，对吧？
不幸的是。 （除非@Omar 有更好的建议）。
这让我很困惑，那么loadPage api.jquerymobile.com/jQuery.mobile.loadPage 的目的是什么？以上是关于jQuery mobile：'pageinit'没有触发的主要内容，如果未能解决你的问题，请参考以下文章