jQuery Mobile“pagebeforechange”被调用了两次答案

【问题标题】：jQuery Mobile "pagebeforechange" being called twicejQuery Mobile“pagebeforechange”被调用了两次
【发布时间】：2016-03-01 08:12:15
【问题描述】：

我为“pagebeforechange”设置了以下监听器（与 jQuery Mobile 文档自己的代码非常相似）和主页上调用 http://localhost/#product?id=255979 的链接

//Bind Listener for Product Details
$(document).bind( "pagebeforechange", function( e, data ) {
    //Only Run If Site is Initialized
    if( ajaxSite.options.initialized ) {
        if ( typeof data.toPage === "string" ) {
            var u = $.mobile.path.parseUrl( data.toPage ),
                pl = /^#product/;

            if ( u.hash.search(pl) !== -1 ) {
                console.log("showProduct being called.");
                ajaxSite.showProduct( u, data.options );
                e.preventDefault();
            }
        }
    }
});

当我打开 JavaScript 控制台并单击链接时，我看到以下内容：

showProduct being called.
showProduct being called.

我似乎找不到任何关于为什么它会被调用两次。我已经看到其他错误，其中 vclicks 由于边缘点击而被注册两次，但这没有任何意义，因为它依赖于实际的页面更改。

【问题讨论】：

您是在运行多页还是单页布局？ jquerymobile.com/demos/1.0/docs/pages/index.html 我问的原因是你绑定到 $(document) 而不是 pageId
多页布局 - "showProduct()" 方法将信息加载到第二页，然后转换。
我想知道既然你绑定了 $(document) 它被多次调用，你可以只使用 pageId 来测试吗？
就是这样 - 还有一个搜索页面，即使它有不同的页面 ID 并且不是“活动的”，它也会导致它调用两次。不知道为什么非活动页面导致事件注册，但这是一个完全不同的问题。非常感谢。盯着它看了几个小时后有点空白:-)。如果你想拼凑一个答案，我很乐意给你一个正确的答案。

标签： jquery-mobile

【解决方案1】：

由于您绑定到 $(document) 并使用多页布局

http://jquerymobile.com/demos/1.0/docs/pages/index.html

我认为 jQM 正在多次加载文档（只是预感）

改用pageId，例如：

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

到

$('#pageId').bind( "pagebeforechange", function( e, data ) { ...

【讨论】：

对我来说，使用 v1.0 插入 pageId 时不会触发事件...（另请参阅stackoverflow.com/questions/8793403/…）
绑定到 pageId 不会触发事件
@JihoKang 如果您使用您正在使用的一些代码发布问题，这样可能会更容易帮助您
@Phill，太棒了，文档中没有提到单页/多页布局之间的这种偏差。谢谢。
@IanWarner 你确实意识到这个例子是针对 jQM 1.0 的，从那以后发生了很多变化......

【解决方案2】：

也许有点晚了，但这是我有根据的猜测：

任何 pagechange 事件都会触发两个转换，一个“向前”（pagechange）和一个“向后”（hashchange）。往前走，hashChange 被阻塞，往后走，反之。

查看 jqm 源代码并检查 ignoreNextHashChange 属性。

这负责在前向转换时阻止 hashChange，否则你会来回走动。

我猜你的函数触发了两次，因为这两个事件都是从 changePage 和 hashChange 内部触发的。

如果是这种情况，JQM 将不得不在触发此事件之前阻止 hashChange 例行程序。

【讨论】：

我给你一点，因为这是有用的建议，但实际上我很久以前就发现了这个问题:-)。问题必须在仍然手动调用页面更改的情况下进行 preventDefault() not running。我在 preventDefault() 上方有一个带有 AJAX 调用的方法，并且 AJAX 的错误没有得到正确处理，并且 preventDefault() 从未被调用。愚蠢的错误，但盯着它看了 6 个小时后，它让我发疯了。真的只需要另一双眼睛来告诉我我一直跳过的东西。谢谢！

【解决方案3】：

它被设计调用了两次。 http://api.jquerymobile.com/pagebeforechange/

如果data.toPage 设置为字符串，则该事件表明导航即将开始。

如果data.toPage 设置为一个jQuery 对象，则该事件表明目标页面已经加载。

【讨论】：

阅读问题。发布的代码显示过滤（typeof data.toPage === "string"）。该事件显示为通过该条件两次。这个问题比较复杂。
这对于那些不知道这一点的人来说是有用的信息，但由于它的措辞方式，我不会将其投票回零

【解决方案4】：

如果您阅读 jquery 移动文档 https://api.jquerymobile.com/pagebeforechange/ ，它会说它被调用了两次，一次 data.toPage 是新页面的 url，第二次 data.toPage 已经是新页面的 jquery 对象。

【讨论】：