在pagecontainershow上

Question

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

这些页面的布局如下：

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

这些都有很多，我正在努力做到，以便在加载listpets页面时，它会触发javascript事件。

我一直在阅读pagecontainershow尝试使其运行。

这是我的代码：

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

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

谁能看到我要去哪里错了？

汤姆

Answer 1

jQuery Mobile 1.4首次引入了pagecontainer小部件。

与以前的页面处理方式不同，该方式被绑定到文档级别，并且您不能将其绑定到特定页面（除非您使用的是不受影响的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将允许您将页面事件绑定到特定页面。

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

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

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

最后一件事，pagecreate不是pagecontainer小部件的一部分，因此您可以像这样使用它：

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

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