Question

I am working on an app with jQuery mobile. I have a script that I want to start once the user enters a page and stops once they leave.

I have used:

$( document ).delegate("#myPage", "pagecreate", "", function() {
    //my script here
});

to have the script only run once the user enters “myPage.” How can I have it so the script stops once they leave “myPage”?

Edit: I am using ajax-based navigation so it is all one HTML file. I am trying to start and stop a script when someone enters a new subpage (#page).

Answer 1

You can use the pageshow and pagehide events for a specific pseudo-page. Something like this:

$( document ).delegate("#myPage", "pageshow", function() {
    //start your code
}).delegate("#myPage", "pagehide", function() {
    //end your code
});

Here is the documentation for jQuery Mobile Events, there is a whole section on page-events: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Using pageshow/pagehide has the advantage that the code will run on subsequent views of the pseudo-page as well, not just on the first page-load.