Question

I am trying to define the correct way to register both initialization events (jQuery-style) for PhoneGap and jQuery Mobile in an Android application.

After studying the documentation, I came up with the following:

$('#index-page').live('pageinit', function () { // <-- fires
    $(document).bind('deviceready', function () { // <-- !fires
        // ...
    });
});

The “outer” event (pageinit) fires and the “inner” (deviceready) does not…

Although, this type of event registration works perfectly:

window.addEventListener('load', function () {
    document.addEventListener('deviceready', function () {
        // ...
    }, false);
}, false);

Can anybody explain what’s wrong with the first type of event registration? What type is better?

---

Prerequisites:

• PhoneGap v1.2
• jQuery Mobile v1.0rc2
• Eclipse v3.7.1

Answer 1

Please stick with the last one because this is recommended by PhoneGap, your first approach probably isn’t working because you are binding deviceready too late (ie: it is already fired before your bind). Thats because pageinit is fired relatively late.

What you can do is the jQuery way:

$(window).load(function() {
    $(document).bind('deviceready', function () { 
        // ...
    });
});