Question

我对这个主题进行了大量研究，但我找不到合适的答案。我的问题是，当我使用Cordova / Phonegap和JQM时，$(document).ready被触发但不是$(document).on('pageinit')被推荐与JQM一起使用。

<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>    
    var deviceReadyDeferred = $.Deferred();
    var jqmReadyDeferred = $.Deferred();
    document.addEventListener("deviceReady", deviceReady, false);
    function deviceReady() {
        deviceReadyDeferred.resolve();
}
$(document).on("mobileinit", function () {
    jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
    console.log('device ready');    
    $(document).on("pageinit",function(){   
        console.log("document pageinit fired");
    }
}
</script> 
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="js/buttonset.js" type="text/javascript"></script>

此页面托管在远程服务器上。在这种情况下，设备就绪状态显示在控制台中，但不会显示文档pageinit。如果我将$(document).on("pageinit",function(){替换为$(document).ready(function(){，则会显示两个日志，但我不喜欢此解决方案。

你可以告诉我哪里出错了吗？

事先谢谢。

Answer 1

try this sequence of code in script tag.

/* Initialization of PhoneGap and jQM */

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


//initialize PhoneGap
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {

}

//initialize jQM
$(document).on("mobileinit", function () {
  //hack to fix android page transition flicking issue
  if (navigator.userAgent.indexOf("Android") != -1){
      $.extend(  $.mobile , {
          defaultPageTransition: 'none'
      });   
    } 

  setCustomThemeAndOptions();

  jqmReadyDeferred.resolve();
});


//When both PhoneGap and jQM are ready, initialize language setting
$.when(deviceReadyDeferred, jqmReadyDeferred).then(function(){  
  deviceDeferred = true;
});

Phonegap Cordova不会触发JQM pageinit

1 个答案: