Question

I use jQuery Mobile in my application. I have and index.html page, and I try to add another page to my application. So on the index.html page I have a link to the Camera.html page:

<a href="Camera.html">Take a photo</a>   // A. version

When I click on the link, the camera’s page swipes in (it redirects to the Camera.html page with swipe animation), but none of the event handlers are called on the Camera page (load, DOMContentLoaded, etc.). I think that jQuery Mobile uses ajax for redirecting to other pages and that’s why the event handlers are not called.

If I change it to the following, the events are called, but the page redirection won’t be animated:

<a href="Camera.html" data-ajax="false">Take a photo</a>   // B. version

I’d like to keep the animation and I also prefer that on the Camera page some event to be called (I’d like to use it for initialization). So I have the following questions.

1. Do you know at least one event, that will be called, if I use the A. version for redirecting to other page?
2. If I use version A., could I somehow call some event on the other page manually?
3. Should I redirect to another page in some other way?

Could you give me some code samples, please?

Answer 1

I’d like to keep the animation and I also prefer that on the Camera page some event to be >called (I’d like to use it for initialization).So I have the following questions.

Try using this to initialize your page with pageinit, or pageshow

jQuery('[data-role="page"]').live('pageinit', function(){
  /* page initialization */
})

pageinit is fired once – when page is created in DOM, and pageshow is fired every time the page is shown