How to bind "mobileinit" event in jQuery Mobile?

Question

This is how I'm trying to hook into the mobileinit event:

$(document).bind("mobileinit", function() {
    console.log("Mobile init");
});

But this doesn't work on Chrome (Latest version), Ripple v0.9.1 and on a BlackBerry bold 9790 running OS7.0.

Note: I also tried using .on() instead of .bind() but no luck. Both jQuery mobile versions (1.0.1 and 1.1.0) failed.

Answer 1

I've used this and it does work.

Is it possible something else is breaking the script or the mobileinit isn't being fired?

Does Chrome fire mobileinit?

I just found some code I used in jQuery Mobile 1.0 and we just upgraded to 1.1.0 and it works.

You're making sure to also include regular ol' jQuery, right?

jQueryMobile's docs do it, so I'm sure it works. Something else must be wrong. Sorry I'm not much help. Do you have any more info? Or try with a different device.

[edit] On that same self page, it says "Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:"

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- Note your script before jqm -->
<script src="jquery-mobile.js"></script>

Looks like the script order can matter.

Answer 2

Here is another simple example that works with me (for android and ios)

<script type="text/javascript" src="files/resources/lib/jquery/jquery-1.8.2.js"> </script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
                 {
                 if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
                 {
                 // your logic here
                 $.mobile.defaultPageTransition = 'none';
                 $.mobile.defaultDialogTransition = 'none';
                 }
                 if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
                 {
                 // your logic here
                 $.mobile.allowCrossDomainPages = true;
                 $.support.cors = true;
                 }
                 });
</script>
<script type="text/javascript" src="files/resources/lib/jquerymobile/1.3.2/jquery.mobile-1.3.2.js"></script>

1. include the main jquery file
2. bind mobileinit before jquery mobile
3. include jquery mobile js file