Question

I’m building my first jquery mobile site and have run into a problem. When just doing a straightforward hyperlink from one page to another it seems like the page transition effect is stopping the

$(document).ready(function(){
    alert("hello");
});

From firing. If I refresh the page or link to the page directly the event fires.

I’ve tried removing the data-transition from the hyperlink and even tried

<a data-role="button" data-transition="none" href="/otherpage/">link</a>

But still have the same problem.
Andy ideas please? Thanks.

Answer 1

This is by design, as jQuery Mobile loads pages in the background, then incorporates them in the current document before transitioning. This means the original page is not reloaded, so the document does not become ready again.

Accordingly, the documentation on events prominently says (emphasis from original):

Important: Use $(document).bind('pageinit'), not $(document).ready()

Therefore, you should write:

$(document).bind("pageinit", function() {
    alert("hello");
});