jquery/jquery-mobile — Issue #3234: JQM 1.0 Dialog close is re-initializing the entire document and ALL pageinits (multi-page template)
Author: JeffSkee
Created: 2011-12-07 21:06:03+00:00
State: open

In efforts to trap a strange cumulative event binding issue in a JQM multi-page model I've modified the stock multipage template to write out console.log messages when the document head gets loaded, when the mobileinit() event fires, and when each pageinit() fires.

I've discovered that when a dialog closes the entire document is essentially re-loaded, mobileinit() is fired again and ALL pageinit() events are fired in succession, resulting in very undesirable behavior. I've create a jsfiddle here: http://jsfiddle.net/JeffSkee/yRheJ/. The steps to reproduce are:

Open your browser debugging console (f12)
Run the fiddle.
Click the 'Show page "two"' Button
Click the 'Back to page "one"' Button
Click the 'Show page "popup" (as a dialog)' Button
Click the 'Back to page "one"' Button

When the dialog closes you will see the entire document reload and each pageinit is fired as shown in following console debug:

fiddle.jshell.net:40mobile init firing now!
fiddle.jshell.net:46last line in the head has just been executed
fiddle.jshell.net:58page one init
fiddle.jshell.net:90page two init
fiddle.jshell.net:116popup init
// EVERYTHING THAT FOLLOWS FIRES IMMEDIATELY WHEN THE DIALOG IS CLOSED
fiddle.jshell.net:40mobile init firing now!
fiddle.jshell.net:46last line in the head has just been executed
fiddle.jshell.net:58page one init
fiddle.jshell.net:90page two init
fiddle.jshell.net:116popup init