$(":mobile-pagecontainer")
is not working. I have to use $(document)
.
Anything wrong with the following code?
<div data-role="page" id="page1">
<div data-role="header" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
<a id="gotoPage2" href="#page2" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Go to Page 2</a>
<script>
// not working
$( ":mobile-pagecontainer").on( "pagecontainerhide", function( event, ui ) {
alert( "page hide ");
});
// working
$( document).on( "pagecontainerhide", function( event, ui ) {
alert( "page hide " );
});
</script>
</div>
</page>
<page data-role="page" id="page2">
....
</page>
But it works for changing page as followings:
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { } );
Thanks.
$(":mobile-pagecontainer")
is a selector that refers to wrapper of all pages, internal or external. By defaultbody
is:mobile-pagecontainer
and.pagecontainer()
is a widget used to emit jQuery Mobile's special events and used for navigation.jQuery Mobile events bubble up to
document
so you can use to capture those events.If you want to attach events to pageconatiner, you have to wrap them in
.ready()
in order to make them work.It is possible also to use the widget
.pagecontainer()
.