How to initialize pages in jquery mobile? pageinit not firing

Question

What\'s the right way to initialize objects on a jquery mobile page? The events docs say to use \"pageInit()\" with no examples of that function, but give exam

Answer 1

Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.

Answer 2

Try this:

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});

Answer 3

jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!

Answer 4

The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:

<script>
  $(document).ready(function() {
      alert("This happens");
  });
</script>

Answer 5

I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.