Question

我正在构建一个JQM应用程序。它是一个多页应用程序，它使用jquery移动页面div来隐藏和显示页面。

这些页面的布局如下：

 <div data-role="page" id="listpets" data-title="List Pet">
      <p>Page Data</p> 
 </div>

有很多这些，我试图这样做，以便在加载listpets页面时，它会触发javascript事件。

我一直在阅读pagecontainers上试图让它运行。

继承我的代码：

$( "#listpets" ).on( "pagecontainershow", function( event, ui ) {
    alert("BOOOM");
});

但是，当我加载列表时，它不会触发警报。

谁能看到我出错的地方？

汤姆

Answer 1

jQuery Mobile 1.4首次引入了pagecontainer widget。

与以前的页面处理方式不同，这个方法被绑定到文档级别，您无法将其绑定到特定页面（除非您使用的pagecreate事件不受影响）。

基本上这段代码：

$( "#listpets" ).on( "pagecontainershow", function( event, ui ) {
    alert("BOOOM");
});

应改为：

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

    if (pageId === 'listpets') {

    }
});

工作示例：http://jsfiddle.net/Gajotres/vds2U/

不幸的是，这种页面事件处理方式与直观相反，jQuery Mobile开发人员也承认这一点。现在使用这种处理方式，幸好jQuery Mobile 1.4.3允许您将页面事件绑定到特定页面。

如果您想了解有关此主题的更多信息，请查看官方开发人员。声明 here 。

如果需要，您仍然可以使用旧方式绑定页面事件：

$(document).on('pagebeforeshow', '#index', function(){ 
    console.log("init");
});

最后一点，pagecreate不是pagecontainer小部件的一部分，所以你可以像这样使用它：

$(document).on('pagecreate', '#index', function(){ 
    console.log("init");
});

如果您想了解有关此更改的更多信息，请在此处阅读Omar's博客。他最初建议对pagecontainer小部件进行更改，导致将来的1.4.3更改（更改将再次允许您将页面事件直接绑定到页面）。

在pagecontainershow

1 个答案: