JQueryMobile: pagecontainershow on a specific page does not work

Question

JQueryMobile 1.4 is deprecated in the showhow event and recommends using pagecontainershow instead; however, although I can get a pagecontainershow event at the document level, I cannot bind a function to a specific page.

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

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

I also looked at using an alternative form of the jQuery "on" function, where we use a selector, but this should be the parent element of the page div, and this may include other pages, so this does not work.

As a workaround, I did 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); } }); } 

Answer 1

You can get a page id like this.

 $(document).on('pagecontainershow', function(e, ui) { var pageId = $('body').pagecontainer('getActivePage').prop('id'); }); 

There is currently no way to show the show / hide event on a specific page.

Answer 2

Here is what I use (jqmobile> 1.4):

 $(document).on("pagecontainershow", function () { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); var activePageId = activePage[0].id; switch (activePageId) { case 'loginPage': ... break; case 'homePage': ... break; case 'groupPage': ... break; default: } }); 

Answer 3

 $(document).on("pagecontainershow", function(event, ui) { var pageId = $('body').pagecontainer('getActivePage').prop('id'), showFunc = pageId+'_show'; if (typeof MobileSite[showFunc] == 'function') { MobileSite[showFunc](); } }); 

MobileSite is contained in an external .js file with all the show () functions.