Ben Struthers

jQuery Mobile Page Events

Tagged with:

This is a post from the archives.

See more archived posts in the archives.

Knowing the order of events is crucial to making sure things are setup correctly. Below is a listing of the jQuery Mobile page events, inspecting the console will show when they fire.

$('div[data-role="page"]').live('pagebeforeload', function (ev) {
  console.log('pagebeforeload');
});
$('div[data-role="page"]').live('pageload', function (ev) {
  console.log('pageload');
});
$('div[data-role="page"]').live('pageloadfailed', function (ev) {
  console.log('pageloadfailed');
});
$('div[data-role="page"]').live('pagebeforechange', function (ev) {
  console.log('pagebeforechange');
});
$('div[data-role="page"]').live('pagechange', function (ev) {
  console.log('pagechange');
});
$('div[data-role="page"]').live('pagechangefailed', function (ev) {
  console.log('pagechangefailed');
});
$('div[data-role="page"]').live('pagebeforeshow', function (ev) {
  console.log('pagebeforeshow');
});
$('div[data-role="page"]').live('pagebeforehide', function (ev) {
  console.log('pagebeforehide');
});
$('div[data-role="page"]').live('pageshow', function (ev) {
  console.log('pageshow');
});
$('div[data-role="page"]').live('pagehide', function (ev) {
  console.log('pagehide');
});
$('div[data-role="page"]').live('pagebeforecreate', function (ev) {
  console.log('pagebeforecreate');
});
$('div[data-role="page"]').live('pagecreate', function (ev) {
  console.log('pagecreate');
});
$('div[data-role="page"]').live('pageinit', function (ev) {
  console.log('pageinit');
});
$('div[data-role="page"]').live('pageremove', function (ev) {
  console.log('pageremove');
});