jQuery 移动页面容器如何正确绑定事件

jquery mobile pagecontainershow events binding correct way

本文关键字：何正确 绑定 事件 移动 jQuery      更新时间：2023-09-26

>我在一个文件中有两个页面，如下所示：

    <section id="firstpage" data-role="page">
    <header data-role="header">
      <h1>Event Example</h1>
    </header>
    <div class="ui-content">
      <p>This is page 1<a href="#secondpage">click here</a></p>
    </div>
</section>
<section id="secondpage" data-role="page">
    <header data-role="header">
      <h1>Event Example</h1>
    </header>
    <div class="ui-content">
      <p>This is page2</p>
    </div>
</section>

基本上我希望在第二页显示上触发一个页面容器如何事件我想做的是，当"第二页"加载时，我想执行运行一些初始化代码。我面临的问题是第二页在 AJAX 获取的 DOM 中不活跃，那么我如何在第二页的显示中绑定事件

我所做的是这个

$( document ).on( "pagecontainershow", function ( event, ui ) {
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
  if(activePage[0].id=="secondpage"){
   //do the initialization for second page
  }
  });
页面

容器如何显示事件是我想要的，但它为每个页面触发，我如何将其绑定到仅在第二页显示时触发

我只能想到两种选择，我认为它们不会有任何区别，但也许值得一试：

1） 使用div 而不是部分

2） 使用 UI 对象而不是 getActivePage 方法检索当前页面，如下所示：

$( document ).on( "pagecontainershow", function( event, ui) {
 var pageId = ui.toPage.prop('id');
 if(pageId ==='secondpage'){
  //do the initialization for second page
 }
});
相关文章：