jQuery Mobile - 无法将 pagebeforechange 绑定到页面 ID？答案

【问题标题】：jQuery Mobile - can't bind pagebeforechange to page id?jQuery Mobile - 无法将 pagebeforechange 绑定到页面 ID？
【发布时间】：2012-01-09 18:38:45
【问题描述】：

我只能将 pagebeforechange 绑定到整个 jquery 移动文档，而不是单个页面。谁能解释为什么this 不起作用？

【问题讨论】：

它不会触发，因为页面没有重新加载或更改。看docs。
我也有同样的问题——直接绑定到页面时“pagebeforechange”不起作用，而“pagebeforeshow”和“pagebeforecreate”工作正常。

标签： jquery mobile jquery-mobile

【解决方案1】：

$("div[data-role='page']").live( "pagebeforehide", function( event ) {
alert('This alert should trigger before Next Page Here is shown?');
});

（详情请查看link）您也可以使用 bind 代替 live ，希望对您有所帮助。

【讨论】：

【解决方案2】：

JQM 页面的选择器：

$('.ui-page')

将事件监听器添加到文档中的所有页面可以这样做：

$(document).delegate(".ui-page","pagebeforehide", function(evt, ui){
   alert('pagebeforehide fired');
}

使用 delegate：

注意使用 bind 而不是 delegate 将不适用于上述选择器，因为 ui-page 类仅在页面创建时添加。

为了使用 bind，请使用以下选择器：

$("div[data-role='page']")

并使用添加事件监听器（仅在文档准备好或正文已加载后）：

$("div[data-role='page']").bind("pagebeforehide", function(evt, ui{
alert('pagebeforehide fired');
}

使用 bind：

我还建议使用 mobileinit 事件而不是文档就绪！

【讨论】：

从 jQuery Mobile 1.1.0 开始，您的绑定解决方案适用于“pagebeforeshow”，但不适用于“pagebeforechange”。我不明白。
-1。仔细阅读问题 - 询问的是“pagebeforechange”，而不是“pagebeforehide”事件。您的示例都没有使用“pagebeforechange”。

【解决方案3】：

使用 jQuery Mobile - 我很确定您不会绑定到文档，而是绑定到 pageinit 属性。

绑定到文档会产生问题...请记住，要让此链接再次在 #home 上工作，您将需要另一个事件侦听器来处理 beforepageshow 或再次显示页面之前的内容。

This 文档很有帮助...

【讨论】：

【解决方案4】：

我遇到了完全相同的问题，但我至少有一个解决方法。警告：这是愚蠢、可怕的代码。 但它确实有效。

window.doubleLoadPreventer = 0;

$(document).bind('pagebeforechange', function(e, data){

    if ( window.doubleLoadPreventer === 1 ) {
        window.doubleLoadPreventer = 0;
        return;
    } else {
        window.doubleLoadPreventer = 1;
    }

    //your normal event handler code here
}

【讨论】：

它根本不会触发，但不会触发两次。