Multiple pagebeforecreate events caused by nested listviews with jsfiddle

Question

From my topic over @ jquery: https://forum.jquery.com/topic/multiple-pagebeforecreate-events-triggered-when-jqm-builds-the-page-for-nested-listviews-w-jsfiddle

It's understandable now, but a little unintuitive. Google didn't help much, and mostly pointed to "use pageinit not doc.ready()". A note in the nested listview page would've saved some time. Is it just me or is this kinda unintuitive that the page is loaded before the click?

The question is: How do I detect the difference in events loads? Nothing shined while exploring the event object.

What am I talking about? :) Updated by Daedalus: http://jsfiddle.net/3Shyb/ Original: http://jsfiddle.net/jhr007/mDVfP In the jsfiddle, the messages are sent to the console log. Open and clear the console. Run.

Notice the two messages about "pagebeforecreate Man handle the dom.. " etc.. 1, then 2

If you edit the html and remove the nested <ul> ... </ul>, then run. You get the message once.

This occurs on every page load with a nav menu that has sub menus.

---

http://www.jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. .. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework.

Answer 1

Solution I found was to use the NOW AND IN THE FUTURE bindings of live/delegate( deprecated in jq 1.7 ) like functionality.

So add an id attribute to the div[date-role=page], then use the 'on' method to bind to the events on these ids("#pageid1, #pageid2"), NOW AND IN THE FUTURE...

$( document ).on( 'pagebeforecreate', "#pageid1, #pageid2" ,
    function (event) {
      console.log('pagebeforecreate ', event.target.id );
    }                    
  );