3

I'm trying to navigate to a different .html page using 

$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)

PlayGame.html is being transitioned to, however, none of the following are firing:

$(document).bind("mobileinit", function()
{
alert(1);
});

$('#gamePage').live('pageinit',function(event, ui)
{
    alert('pageinit');  
});

$('#gamePage').live('pagebeforeshow',function(event, ui)
{
    alert('booooo');
});

However, if I do window.location.href = "PlayGame.html" then everything fires accordingly.

What am I missing?

Thanks

Tom

Jasper
  • 75,717
  • 14
  • 151
  • 146
Tom Schreck
  • 5,177
  • 12
  • 68
  • 122

1 Answers1

20

If the code in your example is in the <head> of the PlayGame.html document then it will not be included when the jQuery Mobile framework grabs the page via AJAX. That is why your custom code runs when you load the whole page but not when clicking on a link from another page.

You will want to either put your custom JavaScript in a single file and include it on every page (so it will be available no matter what page the user enters your site from) or you will want to move the custom JavaScript for each page into the <div data-role="page"> element for each page (so it will be included when the page is pulled into the DOM).

The reason is that when you click on a link to an external file, jQuery Mobile uses AJAX to pull out the first instance of a <div data-role="page"> element and places that element in the current DOM, everything else in the document is discarded.

Here is some suggested reading about how jQuery Mobile navigation works: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html

Jasper
  • 75,717
  • 14
  • 151
  • 146