在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）
Posted
技术标签:
【中文标题】在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）【英文标题】：Using normal JQuery in Phonegap Project (with JQuery Mobile) 【发布时间】：2013-05-09 15:02:43 【问题描述】：我正在构建一个使用 Cordova/PhoneGap 和 JQuery Mobile 的应用程序。
我想在应用程序中使用 JQuery，但我无法让它工作 - 没有任何反应，即使是简单的代码。
我相信我的标题设置正确：
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>
<script type="text/javascript">
app.initialize();
</script>
当我得到 JQuery Mobile 样式的标题和后退按钮等时。
但是当我尝试一些简单的事情时：
document.addEventListener("deviceready", function()
$('p').append("<strong>HEllO</strong>");
);
在myscripts.js 文件中，我什么也得不到。我需要以不同的方式触发 JQuery 吗？谁能指出我正确的方向？
编辑：
我发现this 提到将它放在 div 中。这实际上对我有用，例如
<div class="normal" data-role="page" data-title="Program">
<script type="text/javascript">
$(".normal").on('pageinit', function()
$('p').append("<strong>HEllO</strong>");
);
</script>
但肯定有更好的方法吗？必须有一种方法可以将这些脚本全部放在自己的外部文件中？
PS：我的 html 是：
<body>
<div data-role="page" data-title="Program">
<div id="programholder">
<div data-role="header">
<a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
<h1>HEADER</h1>
</div><!--HEADER-->
<div data-role="content">
<p>
Append here
</p>
</div><!--CONTENT-->
</div><!--HOLDER-->
</div><!--PAGE-->
</body>
【问题讨论】：
【参考方案1】：要理解一个问题，您必须了解 jQuery Mobile 的工作原理。它使用 ajax 加载其他页面。
首页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM 中。
因此，如果您想为每个页面分离 js 文件，则需要从 BODY 初始化它们，因为 HEAD 将被丢弃。
像这样：
<body>
<script>
// Your javascript will go here
</script>
// And rest of your HTML content
</body>
您的 LINK 和 STYLE 标签也是如此。
如果您想了解更多信息，请阅读我的另一篇文章，其中包含有关此主题的示例：Why I have to put all the script to index.html in jquery mobile
另外，在使用 jQuery Mobile 时，千万不要使用这种初始化：
document.addEventListener("deviceready", function()
$('p').append("<strong>HEllO</strong>");
);
你也不应该使用准备好的经典 jQuery 文档。它们中的 Bot 通常会在页面成功加载到 DOM 之前触发。这就是为什么 jQuery Mobile 有页面事件。而且您使用 pageinit 事件是正确的，但是您以错误的方式进行了操作。 jQuery Mobile 页面事件应该像这样绑定：
$(document).on('pageinit', ".normal",function()
$('p').append("<strong>HEllO</strong>");
);
如果您想了解更多信息，请阅读我关于文档就绪与页面事件差异的其他答案：jQuery Mobile: document ready vs page events
【讨论】：
啊！这就说得通了。那么如果我将所有外部脚本的链接放在索引页面的标题中，我猜对了吗？ 你是对的，从实用和审美的角度来看，这是最好的方法。以上是关于在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）的主要内容，如果未能解决你的问题，请参考以下文章
在Phonegap项目中结合Ajax、Jquery、mysql、php不起作用
来自 jQuery.ajax 请求的 403 Forbidden 响应与 PhoneGap 桌面
在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境
Jquery mobile 1.2 和 PhoneGap 2.2.0 页面过渡闪烁