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.
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.