JQueryMobile: pagecontainershow on a particular page not working

user_2837226 0
Viewed 6628

JQueryMobile 1.4 has deprecated the pageshow event and instead recommends using pagecontainershow; however, while I'm able to get the pagecontainershow event at a document level, I can't bind a function to a particular page.

<div id="page1" data-role="page">
...
<script>
  $( "#page1" ).on( "pagecontainershow", function( event, ui ) {
    console.log("page1 pagecontainershow");
  } );
</script>
</div>

Demonstration: http://jsbin.com/IFolanOW/22/edit?html,console,output

I also considered using the alternative form of the jQuery "on" function where we use a selector, but that would need to be a parent of the page div, and that might include other pages, so that doesn't work.

As a workaround, I've done this, but it is very inefficient:

function registerOnPageShow(pageId, func) {
    var strippedPageId = pageId.replace("#", "");
    var e = "pagecontainershow." + strippedPageId;
    // TODO why isn't it working to use $(pageId) instead of $(document)?
    $( document ).off(e).on(e, null, {page: strippedPageId, f: func}, function(e, ui) {
      if ($(":mobile-pagecontainer").pagecontainer("getActivePage")[0].id == e.data.page) {
        e.data.f(e, ui);
      }
    });
}
jquery-mobile
4 Answers
$(document).on("pagecontainerbeforeshow", function (event, ui) {

    if (typeof ui.toPage == "object") {
      var crrentPage =   ui.toPage.attr("id") 

            }
});

and you must use this code before calling Index.js !!

user_14121780
Related