问题
$(":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.
回答1:
$(":mobile-pagecontainer") is a selector that refers to wrapper of all pages, internal or external. By default body
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.
$(document).on("pagecontainershow", function (e, data) {
console.log(data.toPage); /* current active page */
console.log(data.prevPage); /* previous page */
});
If you want to attach events to pageconatiner, you have to wrap them in .ready()
in order to make them work.
$(function () {
$(":mobile-pagecontainer").on("pagecontainerhide", function (e, data) {
console.log(data.toPage); /* page navigating to */
console.log(data.prevPage); /* page that was just hidden */
});
});
It is possible also to use the widget .pagecontainer()
.
$(":mobile-pagecontainer").pagecontainer({
hide: function (e, data) {
/* code */
},
show: function (e, data) {
/* code */
}
});
来源:https://stackoverflow.com/questions/26835071/mobile-pagecontainer-not-working