$(":mobile-pagecontainer")
无效。我必须使用$(document)
。
以下代码有什么问题吗?
<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>
但它适用于更改页面如下:
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { } );
感谢。
答案 0 :(得分:3)
$(":mobile-pagecontainer")
是一个选择器,它引用内部或外部所有页面的包装。默认情况下,body
为:mobile-pagecontainer
,.pagecontainer()
是用于发出jQuery Mobile特殊事件并用于导航的小部件。
jQuery Mobile events冒泡到document
,以便您可以用来捕获这些事件。
$(document).on("pagecontainershow", function (e, data) {
console.log(data.toPage); /* current active page */
console.log(data.prevPage); /* previous page */
});
如果要将事件附加到 pageconatiner ,则必须将它们包装在.ready()
中才能使它们正常工作。
$(function () {
$(":mobile-pagecontainer").on("pagecontainerhide", function (e, data) {
console.log(data.toPage); /* page navigating to */
console.log(data.prevPage); /* page that was just hidden */
});
});
也可以使用小部件.pagecontainer()
。
$(":mobile-pagecontainer").pagecontainer({
hide: function (e, data) {
/* code */
},
show: function (e, data) {
/* code */
}
});