jquery mobile - pageinit event no triggered when using mobile.changePage

Question

I have the following code for handling on click event of a button:

$(document).on("click", '.submit_review_button', function(event, ui) {


    var place = $.data(this, "object");
    var ttext = $("#review_text").val();
    var review = new Object();
    review.business_place_id = place._id;
    review.review = ttext;
    review.user_id = user._id;
    // var review = {business_place_id:place.id, review: ttext, user_id: user.id}

    $.ajax({
        url: site_url + '/reviews/',
        type:'POST',
        data: review,
        success: function(data) {
            $.mobile.changePage("show_reviews_page", {
                    allowSamePageTransition: true,
                    transition: 'none',
                    reloadPage: true    
                });
            // initShowReviewsPage();


       },
       error:function(data) {
        alert(1);
    }

});

});

I also have this code in document-ready:

  $("#show_reviews_page").on('pageinit', function() {
        initShowReviewsPage();
    });

I know that the pageInit binding works, because if I go to #show_reviews_page using it works.

But when clicking on the .submit_review_button button, the on click event fires, the page changes but the init doent fire and the page is not valid.

Any idea why it doesnt work?

Answer 1

"pageinit" event is fired only once when the page loads in the DOM for the first time. If you want fire a function everytime you go to a page, use "pageshow" or "pagebeforeshow" events.