Search code examples
javascriptjqueryjquery-mobilejquery-events

jQuery Mobile pageinit not working on first load pages (replicable)


Reloading a page or navigating directly to the jQuery Mobile hash URL does not fire the pageinit even once. For example, I have tried this on my secondary page:

    $(function () {
        $(page).bind('pageinit', function () {
            console.log('bind pageinit');
        });
        $(document).on('pagecreate', page, function () {
            console.log('pagecreate');
        });
        $(document).on('pageshow', page, function () {
            console.log('pageshow');
        });
        $(document).on('pageinit', page, function () {
            console.log('pageinit');
        });
    });

While on page one, I click to go to the page two and the above life cycles gets written to the console. The URL also appended #two. This is great, but when going to the link on another machine, the page init does not fire. It seems only a button click can trigger the page init.

I have a live example here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html. Paste this in the URL and events do not trigger: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two (notice the hash URL).


Solution

  • Yes I had the same problem.

    For execute some javascript code on page init a use this structure:

    $(document).bind("mobileinit", function(){
        $('#mainPage').live('pageshow', function(){
            // Some Javascript code
        });
    });
    

    Now I can execute code all the time that the page was called.