unsupported pseudo: mobile-pagecontainer

Question

I'm trying to setup a function beforeshow on a page container. Reading the jquery mobile docs. The API docs describe:

$( ".selector" ).pagecontainer({
   beforeshow: function( event, ui ) {}
});

I have no idea what the .selector refers to in the API docs (the docs are quite confusing in their usage of .selector). However I have found a post suggesting that :mobile-pagecontainer can be used: https://stackoverflow.com/a/24173950/1033422

I have created the following:

$(":mobile-pagecontainer").pagecontainer({
   beforeshow: function( event, ui ) {
      ...
   }
});

But this results in:

Uncaught Error: Syntax error, unrecognized expression: 
   unsupported pseudo: mobile-pagecontainer

I'm using jquery mobile 1.4.5.

Answer 1

I think the problem was because I was trying to bind to a jquery mobile event before jquery mobile was initiated.

Moving $(':mobile-pagecontainer').pagecontainer() inside a pageinit function fixed the issue for me:

$(document).on("pageinit", "#settings", function(e) {
      e.preventDefault();

      $(':mobile-pagecontainer').pagecontainer({
           beforeshow: function( event, ui ) {
              ...
           }
      )};
)};