Jquery Mobile Pageshow Event Is Not Firing On First Page

I am new to jquery mobile frame work.On my observation i am not able to fire pagebeforeshow event on the first page of my document Could anyone faced the same issue.Please suggest

Solution 1:

demohttp://jsfiddle.net/yNzzG/

In the demo you will see alert when pagebeforeshow handler will get triggered.

Rest code will make it clear, hope it helps,

code

$(document).bind('mobileinit', function() {
    alert('mobileinit');
});

$(function() {
    var selector = ':jqmData(role=page)';
    $('body').on('pageinit', selector, function(e, data) {
        // initialize pagevar $page = $(this);
        alert('init ' + $page.attr('id'));
    }).on('pagebeforeshow', selector, function(e, data) {
        // showpagevar $page = $(this);
        alert('show Page before Show Stuff == > ' + $page.attr('id'));
    });
    $('#page1').on('pageinit', function(e, data) {
        // setup handlervar $page = $(this);
        $page.find('.colorchanger').click(function() {
            var $content = $page.find('.ui-content'),
                isBodyC = $content.hasClass('ui-body-c');
            $content.toggleClass('ui-body-c', !isBodyC).toggleClass('ui-body-e', isBodyC);
        });

    });
});

Solution 2:

Another alternative that works well for me and doesn't require other event handlers so all my pageshow binds are in one place is to simply create a dummy first page that will immediately change to the first visible one:

<div id="start" data-role="page" data-title="App Title"></div>
<div id="realFirstPage" data-role="page">
   ...
</div>

Then at the end of the document.ready function, simply do this:

setTimeout(function() {
    $.mobile.changePage($("#realFirstPage"), {
        transition: 'pop',
        changeHash: false
    });
}, 100);

Solution 3:

It may happen because jquery dom model is not ready for the first time to fire page show event for the first page, So try include (bind pageshow event) in pageinit event, it works for me...

$(document).on("pageinit", "#pageId", function(e){
    console.log( ' Inside the  pageinit event' );
    $(document).on("pageshow", "#pageId", function(e){
         // code for page show event
  });
         // code for pageinit event
  });