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

Answer 1

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

Answer 2

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.