Document pageinit fires more than once on iOS (jQueryMobile)

Question

I've got a Phonegap & jQuery Mobile app that works nicely on Android and web. On iOS I am getting unexpected results, which seem to be caused by the fact that the document.pageinit event to which I bind the handler for most of the app's processes is fired twice.

No, I didn't bind it twice. No, I didn't use document.ready. Yes, I did bind it to the document, early on in the script and not inside any other function.

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

The first time it fires, the splash screen is still showing. At this point, while testing on a MacBook Pro with XCode, the console is not even avaiable: the above message didn't show up in the console when I used console.log.

Second time around, the fires shortly after jQueryMobile has created the first page.

What is causing this double firing and what can I do about it?

EDIT: I noticed later on that pageinit doesn't just fire a second time, but every time I open a new data-role='page' div. See my answer below.

Answer 1

I appreciate Zoltans answer and it may be relevant in some cases, but that was not the cause.

$(document).on('pageinit') will fire for every page transition used in your jQuery Mobile app. This will happen both with HTML links and when using $.mobile.changePage();.

Shockingly, the docs don't mention this anywhere: they advise you to use it without mentioning that it will fire for every subsequent page.

I can't believe that they are framing this problematic example as a valid equivalent of $(document).ready().

They should be advising you to bind using .one() instead of .bind() or on() to avoid multiple code execution.

Answer 2

It happens because i think you use jquery and jquery mobile together. But the solution is simple. Try

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

This should solve it