Phonegap Cordova does not fire JQM pageinit

Question

I have made lots of research on this topic but I did not find an appropriate answer. My problem is that when I use Cordova/Phonegap with JQM, the $(document).ready is fired but not the $(document).on('pageinit') which is recommanded to use with 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>

This page is hosted on a remote server. In this case, device ready appears in the console but not document pageinit fired. If I replace $(document).on("pageinit",function(){ by $(document).ready(function(){, both logs appear but I dislike this solution.

Could you please tell me where I got wrong ?

Thanks beforehand.

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;
});