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 me the steps to trigger the event or any other alternative

回答1:

demo http://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 page
        var $page = $(this);
        alert('init ' + $page.attr('id'));
    }).on('pagebeforeshow', selector, function(e, data) {
        // showpage
        var $page = $(this);
        alert('show Page before Show Stuff == > ' + $page.attr('id'));
    });
    $('#page1').on('pageinit', function(e, data) {
        // setup handler
        var $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);
        });

    });
});

回答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);

回答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
  });

来源：https://stackoverflow.com/questions/11240408/jquery-mobile-pageshow-event-is-not-firing-on-first-page