pageinit event not firing on direct load #2540

leopd opened this Issue Sep 27, 2011 · 17 comments


None yet
leopd commented Sep 27, 2011

The docs for the pageinit event say

We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

But this simple test shows that the pageinit event does not fire if the page is loaded directly:

  <script type="text/javascript" charset="utf-8" src=""></script>  
  <script type="text/javascript" charset="utf-8" src=""></script>

  <div data-role="page" id="myPage">

    $("#myPage").live('pageinit',function() {
        alert("This never happens");

Personally, I'd prefer it if it works how the docs say it should.

jblas commented Sep 27, 2011


I just tested it and it IS firing. Are you linking against the latest source from the HEAD?

<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
@jblas jblas was assigned Sep 27, 2011
jblas commented Sep 27, 2011


I just verified with your test case above that the alert is firing when using the JS/CSS from the HEAD. Note that the fix for this was made AFTER Beta 3.

@jblas jblas closed this Sep 27, 2011

It still does not work for me. The pageinit is only fired when I load the page without Ajax, with Ajax, it's not called. I used the exact code sample from @leopd, just replaced the css/js with the ones from @jblas's comment above.

See for yourself:

The first page is test1.html, with a link to test2.html. When you click on that link, there should be an js alert, but it's not coming up. However, when you load test2.html in the browser directly, it's showing.

Update: I also tested it with the 1.0RC1 code, still not working.

Update: ok, I got it working, but it only seems to work when placing the <script> section within the

section (unfortunately not really clean html as per xhtml). But I recall, it's mentioned in the jqm docs somewhere that anything in head is not loaded when changing a page via ajax, so that explains the behaviour.

leopd commented Oct 7, 2011

@mathiaslin I opened a second bug for the AJAX issue

How did you work around it? You moved the script code inside the <div data-role="page">?


@leopd: yes, I moved it inside the page. Which makes sense (unfortunately it's not xhtml compliant), since as per documentation, ajax doesn't load anything that's in the head section, only loads the page section.


Just spent an hour trying to get this working... thanks @mathiaslin! I got it working by placing the jquery inside the div :)

JocaPC commented Oct 27, 2011

I don't understand is this a bug or feature? If we should not use pageinit in the heading, then I assume that documentation on the should be changed and clearly state that page init would not work in ajax calls. Currently documentation page is misleading because it explicitly says that :
"To execute code whenever a new page is loaded and created, you can bind to the pageinit event. " It does not say that we should put in outside of head tag.

jblas commented Oct 27, 2011


The pageinit event is ALWAYS fired for every page that is in the initial document loaded in the browser, and for every page pulled in dynamically via AJAX. The issue folks are having here is that they are wanting to register event handlers that listen for pageinit from script in the external pages that are being loaded when the user navigates to it. The one requirement the framework has is that if you want JS in an external page to be executed, it has to be embedded within the page content of the external document. This is because the framework only uses the markup of the first page in the external document, and throws everything else away. It does this because it has to avoid reloading duplicate JS and CSS files that may be referred to in the external document.

To re-iterate, the pageinit event is being fired, the issue here is how folks register their callbacks.

ajangus commented Oct 29, 2011


What about for pages that involve the back button? What is the appropriate event to hook onto? I have been reading the above threads as well as #2637 on the behavior of pageInit. For pages that involve Back, I have had pageShow work well. Is that a best practice?

stoem commented Dec 22, 2011

Clearly the issue is not just about 'how folks register their callbacks', otherwise people wouldn't stumble over this issue time and time again. It is a best practice not to include code that relates to behaviour into the markup of the page, right?

The docs need to be updated IMO and make this much clearer.
I understand the reasons for why things are set up in this current way, but it's far from ideal.


pageinit doesn't work for me even with the function all on the same page and loaded normally in a browser (no ajax). this is a bug. i have to put in with the html page section

leopd commented May 14, 2012

Over 17k views on SO point to this issue not actually being fixed. I'd re-open if I could.



Here is a fiddle that shows an alert on pageinit:
Maybe you can explain what needs to be fixed?


This is still an issue even with the 1.2 alpha release. The pageinit fires if it is loaded later in the app life cycle. HOWEVER, it does not fire if it is the first page being loaded. You can see for yourself here:

  1. Click on 'Show page "two"'
  2. An alert will show saying "Page init fired!" (see code near closing body tag).
  3. Notice the URL, close your browser and now go directly to page 2: . Pageinit never ever fires from here for page 2!

Is there please a workaround for this? Please acknowledge this is an issue.


@basememara i'm not sure it's okay to wrap the code inside

$(function () {

I'm using jQuery 1.2 alpha and the following call never failed me:

$(document).delegate('#productPage', 'pageinit', function(){
// do stuff 
.delegate('#checkoutPage', 'pageinit', function(){
 // do stuff

This is called in the <head> element, included from a .js file


Hi @basememara

Here is a fiddle to demonstrate pageinit and other page event bindings: (edit:

You can also go direct to #page2: and see the events happen.



You guys are spot on. Pageinit works when I take it out of $(functiona(..)). I know the docs say not to use document.ready but it's hard to forget that habit and creates a trippy area. I appreciate the clarification.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment