Question

I am developing a jQuery mobile web app, which currently has two pages.

First, page 1 appears, and if user clicks on a link, page 2 opens with jQuery mobile ajax navigation system.

But, there is a problem. page 2 should run a javascript code when it loads, but jQuery mobile ajax navigation removes that script, even if I put <script>...</script> in <div data-role="content">...</div>… (javascript runs if I use rel="external" in my link in page 1, but If I want to use ajax navigation, javascript wouldn’t load…)

How to run that javascript code when page 2 loads with ajax navigation system of jQuery Mobile?

Answer 1

In your page 2, add this:

$(document).bind("pageshow", 
  function(e) {
    // script here
  }
);

In jQuery mobile, page are being loaded using ajax and cached by default. When page 2 is displayed, “pageshow” event is triggered.