Question

我得到了一些在每个网站上都可见的控件。要将这些控件移动到当前处于活动状态的页面，我使用的是pagebeforechange事件。

$(document).bind('pagebeforechange',function(e,data) {
  var topageid=$(data.toPage).attr('id'); //MY QUESTION IS ON THIS LINE
  console.log("Changing page to "+topageid);
  $header = $('#myheader');
  $footer = $('#myfooter');
  $header.detach();
  $footer.detach();
  $header.prependTo(topageid);
  $footer.appendTo(topageid);
 });

上面显示的源代码有时有效，有时则不然。这是因为data.toPage不时只包含...index.html#mypage这样的网址。如何在任何情况下检测toPage的ID？

Answer 1

您可以使用pagebeforeshow事件而不是pagebeforechange事件。不同之处在于前者在外部页面被添加到DOM后触发，后者在发生之前触发。

还有其他适合您的网页事件：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

从文档（链接到上面）：

<强> pagebeforechange

在任何页面加载或之前触发此事件   过渡。

<强> pagebeforeshow

触发我们正在转换的“toPage”，   在实际过渡动画开始之前。

Answer 2

pagebeforechange事件被触发两次，第一次在加载目标页面之前触发，当你得到包含URL的data.toPage时。第二次触发事件时，将加载目标页面，在这种情况下，您将获得一个包含data.toPage中的页面DOM的查询对象。如果您想坚持pagebeforechange事件，那么您可以执行以下操作：

if (typeof data.toPage != "string") {
    ... Do your stuff ...
}

如果您对要使用的事件保持灵活性，请遵循Jasper建议并使用pagebeforeshow，这将允许您在页面转换到之前修改您的去除页面DOM。

jQueryMobile pagebeforechange获取目标页面ID

2 个答案: