Can someone clear out the usage of event handlers in multipage? Documentation is good but don't warn about the possible conflicts that may arise if you mix the things.
For example, as a newbie I noticed that I get double fire triggering if I place my event handlers in this html structure, that comes out from the logic following (or at this point overlooking) the docs:
<body>
<div data-role="panel" id="panel">...</div>
<div data-role="page" id="page1" data-title="myhomePage">...</div>
<div data-role="page" id="page2" data-title="products">...</div>
<div data-role="page" id="page3" data-title="settings">...</div>
</body>
with the following code in the my.js where all the handlers are in the global page (as shown and copied from the doc examples).
$(document).on('pagecreate' ,function(){...event handlers for buttons etc...}); //for the body // ( which is for me actually wrong!!!)
$(document).on('pagecreate', '#page1' ,function(){...}); //for home page
$(document).on('pagecreate', '#page2' ,function(){...}); //for product page
Now, I had an intuition and found a solution in the middle of the try and error by removing the global onpagecreate and markup all the event handlers inside page1.
So now in the Javascript I have only:
$(document).on('pagecreate', '#page1' ,function(){...all my event handlers here...});
//for home page
$(document).on('pagecreate', '#page2' ,function(){...generateLists()...});
//for the product page
And all double events that I was struggling with for days are gone.
But still unsure if I am on the right way as I miss some real solid examples, from the doc.
I also have a complain about the examples in the API documentation methods. I hardly understand the majority of the examples. They are all based on abstract concepts, not on something real usually found on a web app or page, which is really complicating the whole learning process (at least for me).
