文档 pageinit 在 iOS (jQueryMobile) 上多次触发

Posted

技术标签:

【中文标题】文档 pageinit 在 iOS (jQueryMobile) 上多次触发【英文标题】:Document pageinit fires more than once on iOS (jQueryMobile) 【发布时间】:2012-09-15 09:48:16 【问题描述】:

我有一个 Phonegap 和 jQuery Mobile 应用程序,在 android 和 Web 上运行良好。在 ios 上,我得到了意想不到的结果,这似乎是由于我为大多数应用程序进程绑定处理程序的 document.pageinit 事件被触发了两次。

不,我没有绑定两次。不,我没有使用 document.ready。是的,我确实将它绑定到文档,在脚本的早期而不是在任何其他函数中。

$(document).on('pageinit',function(event)
    alert(' Pageinit on document');
    //Some more code
)

第一次触发时,启动画面仍然显示。此时,在使用 XCode 的 MacBook Pro 上进行测试时,控制台甚至不可用:当我使用 console.log 时,上面的消息没有显示在控制台中。

第二次,jQueryMobile 创建第一页后不久触发。

是什么导致了这种双重触发,我该怎么办?

编辑:我后来注意到 pageinit 不只是第二次触发,而是每次我打开一个新的 data-role='page' div 时。请参阅下面的答案。

【问题讨论】:

【参考方案1】:

我很欣赏 Zoltan 的回答,它在某些情况下可能是相关的,但这不是原因。

$(document).on('pageinit') 将为您的 jQuery Mobile 应用程序中使用的每个页面转换触发。这将发生在 html 链接和使用 $.mobile.changePage(); 时。

令人震惊的是,docs 并没有在任何地方提及这一点:他们建议您使用它,但没有提及它会在随后的每个页面中触发。

我不敢相信他们将这个有问题的示例视为$(document).ready() 的有效等效项。

他们应该建议您使用 .one() 而不是 .bind() 或 on() 进行绑定以避免多次代码执行。

【讨论】:

你太棒了!在过去的几分钟里,我一直在寻找解决方案,Google 没有为“pageinit 调用两次”提供任何信息,而您的 .one() 是理想的解决方案。如果可以的话,我会投 10 票 :) 有点令人惊讶的是,我在桌面浏览器(IE10 和 Chrome/Windows)中使用我的应用程序代码时看到了这种行为,而不是在 iOS 中。这个建议的修复也帮助了这些情况。很棒的建议。谢谢!【参考方案2】:

这是因为我认为您同时使用 jquery 和 jquery mobile。 但解决方案很简单。试试

$(document:not(.processed)).addClass('processed').on('pageinit',function(event)

这应该可以解决

【讨论】:

【参考方案3】:

将正文编辑为<body data-role="page"> 应该可以解决问题。

【讨论】:

【参考方案4】:

我在这个问题上苦苦挣扎太久,无法与他人分享。而且我认为这不仅是 iOS 下的问题,而且是 Android 下的问题(在我的情况下它会导致闪烁)。

每次发出请求时都会调用两次“pageinit”事件。第一个是为提供的 url 获取数据的正确方法,另一个是在新页面加载到 DOM 后调用的(jQueryMobile 页面动态注入到文档中)。我认为有更多的解决方案可以解决这个问题,这是我的:

$(document).ready(function()
    $(this).delegate("#page-selector", "pageinit", function(ev, data)); 
    // I don't know why the line has to be present, but otherwise does not work
);

我的 HTML 文档看起来像:

<html>
<head>...here goes scripts...</head>
<body>
   <div id="#page-selector"> <!-- just wrapper -->
       <div data-role="page">
        ... content...
       </div>
   </div>
</body>
</html>

希望能为他人腾出宝贵的时间!

【讨论】:

以上是关于文档 pageinit 在 iOS (jQueryMobile) 上多次触发的主要内容,如果未能解决你的问题,请参考以下文章

jQuery mobile:'pageinit'没有触发

Jquery Mobile“pageinit”没有触发

JS/JQUERY 不更新字符串数组值

jQuery on()方法

jQuery Mobile 点击事件没有触发?

jquery Loader Widget 未显示