Jquery 不能与 phoneGap 一起使用答案

【问题标题】：Jquery not working with phoneGapJquery 不能与 phoneGap 一起使用
【发布时间】：2013-02-28 05:38:39
【问题描述】：

我正在使用phonegap，这段代码在我的安卓手机中完美加载。但是当我点击按钮时，它不显示文本。

    <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
});
</script>
</head>

<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>

</body>
</html>

【问题讨论】：

尝试使用.on('click tap', function(){...}); - 因为您不是在点击移动设备，而是在点击。
改变cordova js和jquery js的顺序....先加载jQuery再加载PhoneGap
本地保存 jquery 并尝试
JQuery 是否被加载？由于您的 src href 以 '//' 开头，这是否意味着请求将是 file:// ？（因为这是从 WebView 内部加载 index.html 的地方）

标签： javascript android jquery cordova

【解决方案1】：

我不认为 JQuery 正在加载到页面中。

您已将其引用为

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

表示使用当前页面作为服务器的任何协议。在移动设备上，您从 file:// 获得服务，因此浏览器获取脚本的实际请求是：

file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

您需要指定要使用的方案，或者将其包含在 PG 项目本身中。

【讨论】：

【解决方案2】：

在使用移动设备时，强烈建议您使用移动版的jquery，jquery.mobile.js

然后你可以使用vclick，一切正常：

处理touchend或鼠标点击事件的标准化事件设备。

$(document).ready(function(){
     $("#btn1").vclick(function(){
       $("#test1").text("Hello world!");
     });
});

【讨论】：

你好“使用移动版的jquery”首先了解jquerymobile而不是移动版的jquery，”一个统一的、基于HTML5的用户界面系统，适用于所有流行的移动设备平台，建立在坚如磐石的基础上jQuery 和 jQuery UI 基础。其轻量级代码采用渐进增强构建，具有灵活、易于主题化的设计。 jquerymobile.com
@ArjunTRAj 这是一个由 jQuery 团队制作的触控优化 JavaScript 库。它利用了 jQuery 和 jQuery UI 的特性，因此您可以在现有的 jQuery 代码之上扩展您正在做的事情。将其称为“完整框架”还是只是 jQuery 的扩展只是技术问题。
@|46kok 我知道但是，jqm 不是“jquery 的移动版”

【解决方案3】：

试试这个：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <script>
     $(document).on('pageinit', function(event){
        $("#btn1").click(function(){
            $("#test1").text("Hello world!");
        });
     });
  </script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
  </script>
</head>

<body>
   <p id="test1"></p>
   <button id="btn1">Set Text</button>

</body>
</html>

如果为移动应用程序开发，请使用 jQuerymobile 的 pageinit 而不是 doc ready。

【讨论】：