Question

我正在从jquerymobile 1.2迁移到1.4.5

我的应用中每个网页的内容均采用以下语法

开始

$("#DemoAccountRegistrationPage").live("pageshow", function() {

我已经能够弄清楚我需要将.live转换为.on以便以上内容成为每个页面引用

$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {

然而我意识到上述格式仍然不符合1.4.5，因此内容未加载

有人可以提供正确的语法以便能够更改

$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {

符合1.4.5的正确语法

我已阅读过jquery文档，但无法完全理解正确的语法需要（jquery mobile非常新）

Answer 1

jQuery文档对此并不十分清楚，但简而言之，{JQM 1.4.0中不推荐使用pageshow，而是在pagecontainer widget上使用pagecontainershow。< / p>

通过将pagecontainershow侦听器添加到document，然后检查参数以确定它是否与我想要的页面匹配，我能够得到一些工作;像这样的东西：

$(document).on('pagecontainershow', function(event, ui) { 
    if(ui.toPage[0].id == "my_page_id"){
      // do some stuff for my_page
    }
});

我试着让它更具可重复性，就像这样：

function on_pagecontainershow(page_id, fn){
  $(document).on('pagecontainershow', function(event, ui) { 
    if(ui.toPage[0].id == page_id){
      fn();
    }
  });
}

on_pagecontainershow('test_page', function(){
    alert('pagecontainershow triggered');
});

我尝试过的语法失败了：

$(document).on('pagecontainershow', '#test_page', function(event, ui) {
   alert("I don't get called (1)");
});

$(document).delegate("#test_page", "pagecontainershow", function() {
  alert("I don't get called (2)");
});

$("#test_page").on("pagecontainershow", function() {
    alert("I don't get called (3)");
});

您可以在this fiddle中试用。

Answer 2

这对我有用，因为我在我的一个项目中使用它：

$(document).on("pagecontainershow", function(e, ui) { 
    var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
    if (typeof ui.toPage == "object") {
        /* manipulate page navigating to */
        switch(pageId) {
            case "page-one":
                //do stuff
                break;
            case "page-two":
                // do other stuff
                break;
        }
    }
});

从jquerymobile 1.2.1迁移到1.4.5

2 个答案: