0

I'm trying to bind to pagechange which is failing to work. Given the following basic page, how do I tell when page 2 is displayed?

<div data-role="page" id='page1'>
  <div data-role="content">
    <h3>Page 1</h3>
    <a href="#page2"
       data-role="button" data-transition="slide" data-inline="true"
       >Open Page 2</a>
  </div>
</div>

<div data-role="page" id='page2'>
  <div data-role="content">
    <h3>Page 2</h3>
    <a href="#page1"
       data-role="button" data-icon="arrow-l" data-rel="back" data-inline="true"
       >Back to page 1</a>
  </div>
</div>

JavaScript

$("#page2").bind("pageshow", function(toPage, ui) {
  console.log($(this));
  console.log(toPage);
});

The change event never fires, though if I use $(document) then it fires, but both $(this) and toPage

I wish to know when page2 is first presented so I can perform functions to retrieve remote data.

4

1 回答 1

2

页面事件应该像这样绑定：

$(document).on("pageshow", "#page2" ,function(toPage, ui) {
   console.log($(this));
   console.log(toPage);
});

工作示例：http: //jsfiddle.net/qvZst/

但是，如果您想在 page2 第一次可用时做某事，那么您需要使用名为 pagebeforecreate 的页面事件

$(document).on("pagebeforecreate", "#page2" ,function() {
   console.log($(this));
   console.log(toPage);
});

不幸pagebeforecreate的是没有 toPage 因为它是一个即将被加载的页面。pagebeforeshow也可以使用，因为它会在页面显示之前触发，您可以使用它来访问上一页数据。

要了解有关页面事件及其顺序的更多信息，请查看我的博客文章。

还有另一种解决方案，您也可以在pagebeforehidepage1 期间执行此操作，但它会在 page 2 之后触发pagebeforecreate。页面事件序列可以在我的文章中找到。

于 2013-07-16T11:34:32.980 回答