JQueryMobile:特定页面上的pagecontainershow不起作用

时间:2013-12-29 19:05:12

标签: jquery-mobile

JQueryMobile 1.4有deprecated的pageshow事件,而是建议使用pagecontainershow;但是,虽然我能够在文档级别获取pagecontainershow事件,但我无法将函数绑定到特定页面。

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

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

我还考虑使用jQuery“on”函数的替代形式,我们使用选择器,但是这需要是页面div的父级,并且可能包括其他页面,因此不起作用。

作为一种解决方法,我已经完成了这项工作,但效率很低:

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);
      }
    });
}

4 个答案:

答案 0 :(得分:9)

您可以像这样获取页面ID。

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

目前无法在特定页面上显示/隐藏事件。

答案 1 :(得分:8)

以下是我使用的(jqmobile&gt; 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:
    }
});

答案 2 :(得分:1)

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

   if (typeof MobileSite[showFunc] == 'function') {
      MobileSite[showFunc]();
   }
});

MobileSite包含在带有所有show()函数的外部.js文件中。

答案 3 :(得分:0)

$(document).on("pagecontainerbeforeshow", function (event, ui) {

    if (typeof ui.toPage == "object") {
      var crrentPage =   ui.toPage.attr("id") 

            }
});

,您必须在调用Index.js之前使用此代码!