Jquery mobile JQM 1.4-在特定页面/选择器上使用pagecontainer事件的首选方式是什么？

jQuery Mobile v1.4，我们是2014年2月

因此，我已经读到，我们应该在捕获的

pagecontainer

事件上做出

if

语句，以假设加载的页面是否是预期的页面

下面是一个小场景，试图了解新pageContainer小部件的预期行为及其预期用途

很简单，一个登录页面，通过编程预取一个欢迎页面，然后在成功登录时切换到欢迎页面。欢迎页面有一些JS脚本来设置页面动画，必须在页面可见时才启动。我们怎么做

以下是我通过控制台调查页面容器事件时得到的结果。我的目标是找到一种方法来检测我的欢迎页面（实际上是任何页面）是否处于活动/可见状态

为了理解，我将此格式用作查询：

$（'body'）。在（'PageContainerBeforLoad'，函数（事件，ui）上{
控制台日志（“加载前”）；
console.log（事件）；
控制台日志（ui）；
});

---

全新开始，当我第一次加载页面&JQM时（即

/Users/login

）

可用事件：

• pagecontainercreate=>空ui
• PCB变形=>ui.toPage可用
• PCshow=>仅获取ui.prevPage（在这种情况下为空）
• PCtransition=>ui.toPage可用

现在，即使禁用了过渡效果（）也会始终启动这些

---

好的，然后我想通过编程加载一个页面（预取），我会：（我想要

/Users/welcome

）

$（“body”）.pagecontainer（“加载”，“用户/欢迎”）；

我启动了这些事件（页面尚未显示）：

• PCbeforeload=>我得到了一个可以用来标识页面的url
• PCload=>与PCBEFLOAD几乎相同的数据

---

好了，现在我要换一个页面：（到

/Users/welcome

）

$（“body”）.pagecontainer（“更改”，“用户/欢迎”）；

我触发了这些事件：

• PChide=>ui.nextPage与ui.toPage相同
• PCB变形=>ui.toPage可用
• PCshow=>只提供ui.prevPage
• PCtransition=>ui.toPage按预期显示

---

好的，现在我非常确定我要使用的唯一一个pagecontainer事件是

pagecontainertransition

，以确保加载此页面。下面是我在需要启动JS的每个页面上实现的内容：

设置页面容器的id（PHP）

---

我设法做了一些有效的、相对简单的、尽可能接近干涸原则的事情（不要重复你自己）

按照“加载”的顺序：

文档中的JS脚本


（功能（）{
//JQM 1.4.0的全局设置
$（文档）.on（“mobileinit”，函数（）{
//在此处应用覆盖
$.mobile.defaultPageTransition='flip'；
});
//有问题的事件侦听器！
$（document）.ready（函数（）{//…仅在主体存在时启动
//有问题的事件侦听器：
$（'body'）。在（'pagecontainertransition'，函数（事件，ui）上{
//获取按编程方式提供给页面的id
id_url=$（“正文”）.pagecontainer（“getActivePage”）[0]。id；
//比较实际事件数据（ui.toPage）
如果（ui.toPage[0]=$（'#'+id\u url）[0]）{
//故障保护
if（typeof（window[id\u url].initPage）=“function”）{
//调用动态创建的init函数
窗口[id_url].initPage（）；
}
}
} );
});
document.loadPage=函数（url）{
$（“正文”）.pagecontainer（“加载”、url、选项）；
};
document.changePage=函数（url）{
$（“正文”）.pagecontainer（“更改”、url、选项）；
};
})();    

每个返回页面的开头

我在宣布
pageshow
不推荐使用后打开了它。没有对错之分，这取决于你。e、 g.您希望在何时执行函数，以及为哪些页面执行函数。不幸的是，
pagecontainer
事件只能绑定到文档。我需要一个全局方法，即预期的方法，在激活此页面时启动特定于页面的代码。实际上，我的上一个公式在导航时不起作用，第一页可以加载，但第二页/第三页。。。将保留第一个函数toLaunchWhenPagesShowup（）：：您可以在每页运行一次
toLaunchWhenPagesShowup（）
，或者无论页面显示多少次都可以。也许如果我调用该函数toLaunchWhenPagesShowup\u PageID（），最好能看到^^^无论如何，我希望每次激活页面时都能启动“某物”（我将控制它是否已加载到其他位置）请注意，
pagebeforeshow
未被弃用，因此您可以使用它并将其绑定到页面id。回答不错。不幸的是，您不会从wiki答案/问题中获得任何代表。我错误地将此答案发布为社区wiki，因此请随意改进配方；）你可以删除它并添加一个正常的答案，而不必勾选wiki选项。说真的，我不再关心这个网站上的代表了。。如果一位JQM大师在这里好奇并想要编辑这段代码，我相信这将是对社区的一个伟大的补充^^
<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
  (function(){
  //Global settings for JQM 1.4.0
  $( document ).on( "mobileinit", function() {
        //apply overrides here
         $.mobile.defaultPageTransition = 'flip'; 
  });
  // The event listener in question !
  $( document ).ready(function () { //..only launched once the body exist
    // The event listener in question :
    $( 'body' ).on( 'pagecontainertransition', function( event, ui ) {
        //gets the id you programatically give to your page
        id_url = $( "body" ).pagecontainer( "getActivePage" )[0].id;
        //compare the actual event data (ui.toPage) 
        if( ui.toPage[0] == $('#'+id_url )[0] ) {
            // failsafe
            if ( typeof( window[ id_url ].initPage ) === "function" ) {   
                // call the dynamically created init function
                window[ id_url ].initPage();
            }
        }
    } );
  });

  document.loadPage = function( url ){
    $( "body" ).pagecontainer( "load", url  , options);
  };
  document.changePage = function( url ){
    $( "body" ).pagecontainer( "change", url  , options);
  };
 })();    
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.4.0.min.js"></script>

<div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">
<div data-role="content">
<script type="text/javascript">