文档pageinit在iOS(jQueryMobile)上不止一次触发

时间:2012-09-15 09:48:17

标签: ios cordova jquery-mobile event-handling page-init

我有一个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。请参阅下面的答案。

4 个答案:

答案 0 :(得分:15)

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

$(document).on('pageinit')将触发jQuery Mobile应用中使用的每个页面转换。使用HTML链接和使用$.mobile.changePage();时都会发生这种情况。

令人震惊的是,docs并未在任何地方提及:他们建议您使用它而不提及它会为每个后续页面触发。

我无法相信他们将这个有问题的例子定义为$(document).ready()的有效等价物。

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

答案 1 :(得分:2)

这是因为我认为你一起使用jquery和jquery mobile。 但解决方案很简单。尝试

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

这应该解决它

答案 2 :(得分:2)

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

答案 3 :(得分:0)

我一直在努力解决这个问题太长时间,不与他人分享。而且我认为这不仅仅是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>

我希望它能为其他人节省宝贵的时间!