jQuery Mobile 在 Phonegap 设备就绪时未构建第一个动态页面答案

【问题标题】：jQuery Mobile not building first dynamic page when inside Phonegap devicereadyjQuery Mobile 在 Phonegap 设备就绪时未构建第一个动态页面
【发布时间】：2013-04-03 02:41:04
【问题描述】：

我有一个使用 JQM 1.3.0 和 Phonegap 的移动应用程序。该应用程序调用 Web 服务并使用 AJAX 填充所有页面的内容。在浏览器中开发并直接调用我的脚本时，一切正常：

applicationScripts()

function applicationScripts(){

    $(document).on("pageinit", "#page1, #page2,  #page3, #page4,  #page5", function() {

        $.ajax({
            //make call and populate content.
        })
    });
}

但是，一旦我从 deviceready 侦听器内部调用该函数，#page1 就不会获取数据。第 2-5 页工作正常。（我还尝试将事件侦听器嵌套在 <body onload="onLoad()"> 函数中，但结果相似。）

document.addEventListener('deviceready', applicationScripts, false);

function applicationScripts(){

    $(document).on("pageinit", "#page1, #page2,  #page3, #page4,  #page5", function() {

        $.ajax({
            //#page1 not getting content. 
        })
    });
}

这是我文件的开头。我所有的脚本都在 application.js 文件中。

<script type="text/javascript" src="js/cordova.ios.js"></script>    
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/application.js" ></script>

我不知道这是否是一些文件/事件在其他文件/事件之前加载的时间问题，但似乎我已经尝试了脚本顺序的所有可能组合以及调用“deviceready”的不同方式。任何帮助表示赞赏！

【问题讨论】：

标签： ajax cordova jquery-mobile hybrid-mobile-app

【解决方案1】：

我已经完成了几个 PhoneGap 项目，但我从未在 deviceready 函数中绑定页面事件。

只需在js文件中绑定页面事件即可。它工作得很好。毕竟，我有 3 个 PhoneGap 项目在生产中运行，并且没有一个项目因此报告问题。

我在我的项目中使用了deviceready 函数来禁用后退按钮，而不是初始化任何页面等。

希望对你有所帮助。

【讨论】：

我也在使用 Geolocation API。我应该将这些脚本留在deviceready 中吗？

【解决方案2】：

你可以试试下面的代码：

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  $(document).on("pageinit", "#page1, #page2,  #page3, #page4,  #page5", function() {
    $.ajax({
          //Do something here
    })
});
}

【讨论】：