jquery在phonegap android中不起作用答案

【问题标题】：jquery not working in phonegap androidjquery在phonegap android中不起作用
【发布时间】：2014-05-22 13:35:00
【问题描述】：

我有这个简单的应用程序，在浏览器中运行良好，但是当使用 phonegap 构建它时，它只显示一个简单的 html 页面，这意味着 jquery 不工作，

在我的页面中，我调用 jquery mobile.min.css ，jquery.min.js 比这个脚本：

$(document).bind("pagebeforechange", function (event, data) {  
$.mobile.pageData = (data && data.options && data.options.pageData)
      ? data.options.pageData
      : null;
});
$(document).ready( function (event) {

  compSearch('');
  $("#searchbtn").click(function () {
    var sText = $("#searchtxt").val();        
    $("#search").dialog("close");
    compSearch(sText)
  });
 }); 
function compSearch(searchString) {
  var theUrl = serverName + "MobileService.asmx/getOrgPage";
  var orgId = qString("org");      

  $.ajax({
    type: "POST",
    url: theUrl,
    data: '{"OrgId":' + orgId +
    ',"SearchString":"' + searchString +
    '"}',
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (msg) {
      var s = msg.d[0];

      $("#header").html(s).trigger("create");

      $("#footer").html(msg.d[3]).trigger("create");          
      $("#contentHeading").html(msg.d[1]);          
      $("#content").html(msg.d[2]).find("ul").listview();

      $("#newscontent").html(msg.d[4]);

    },
    error: function (msg) {
      alert('error ' + msg.d[0]);
    }
  });

 } 

 $(document).on('pagebeforeshow', '#indivnews', function (event, data) {

  if ($.mobile.pageData && $.mobile.pageData.np) {


    var orgId = qString("org");

    var itemId = $.mobile.pageData.np;
    var theUrl = serverName + "MobileService.asmx/getNewsPage";
    var clubName = "";
    $.ajax({
      type: "POST",
      url: theUrl,
      data: '{"orgId":' + orgId +
      ',"compId":' + 0 +
      ',"itemId":' + itemId +
      ',"clubName":"' + clubName +
      '"}',
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function (msg) {
        var s = msg.d[0];

        $("#indivcontent").html(msg.d[4]);

      },
      error: function (msg) {
        alert('error ' + msg.d[0]);
      }
    });
     }
   });

比jquery mobile.min.js

就像我说的它在浏览器中工作正常，如果你有解决它的想法谢谢。

【问题讨论】：

你在初始化：jquery mobile.min.js 吗？
我不明白，我把文件叫做：
所有 jquery 文件都是从源代码调用的，它们在浏览器上运行良好。
这是您的第一个错误，当结合 jQuery Mobile 和 Phonegap 时，您应该始终使用本地 js/css 文件，在这种情况下永远不要从远程源初始化它们。 Phonegap 和 jQuery Mobile 已经是很慢的组合，现在想想当你启动你的应用程序时会发生什么，你需要等待文件从远程源初始化。另一件事，如果由于某种原因，远程源 ID 不可用怎么办？你的应用会失败。
另外，您是否已授予您的 Phonegap android 应用访问互联网的权限？

标签： android jquery jquery-mobile cordova

【解决方案1】：

可能是您在 PQ 和 JQM 正确初始化之前加载了 html 页面。我在我的项目中使用以下内容来确保正确加载框架：

 var deviceReadyDeferred = $.Deferred();
 var jqmReadyDeferred = $.Deferred();
 document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
            deviceReadyDeferred.resolve();
        }

        $(document).one("pageinit", function () {
            jqmReadyDeferred.resolve();
        });
 $.when(deviceReadyDeferred, jqmReadyDeferred).then(frameworksLoaded);

        function frameworksLoaded() {
     $.support.cors = true;
     $.mobile.allowCrossDomainPages = true;
     jQm.allowCrossDomainPages = true;
     console.log('PG & JQM ready');
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width =device-width, initial-scale=1.0, user-scalable=no" />
<title>Test</title>
<link href="Example.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="../www/Scripts/jquery-2.1.0.min.js"></script>
</head>
<body>
</body>
</html>

对 Deferred 和 Jquery Promise 的引用：

http://api.jquery.com/deferred.promise/

【讨论】：

嗨@Chad 我也在下面的代码之后贴上了页面，并保持同样的问题