Jquery Mobile – mobileinit Event not triggered

There have been numerous posts regarding this issue and I had been also stuck in the problem trying to understand why it was not working.

This is the code which was not working and after reading numerous posts, I manage to correct the order of loading the js files but still did not work.

<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jqm-1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript">
$(function(){
   $(window.document).bind("mobileinit", function() {
     console.log("Mobile Init");
     $.mobile.defaultTransition = 'slide';
     $.mobile.allowCrossDomainPages = true;
     $.mobile.touchOverflowEnabled = true;
   });
});
</script>

The code that actually worked properly

<script src="../libs/jquery-1.7.1.min.js"></script>
<script>
$(window.document).bind("mobileinit", function() {
    console.log("Mobile Init");
    $.mobile.defaultTransition = 'slide';
    $.mobile.allowCrossDomainPages = true;
    $.mobile.touchOverflowEnabled = true;
});
</script>
<script src="../libs/jqm-1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="../libs/jqm-1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />

How it worked was by removing the wrapper $(function(){}); from the code and the event was raised as required.

Hope it helps someone