jquery mobile 1.4 page multipage onpagecreate management to avoid double triggers fires

问题

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

回答1:

If you have tasks that always have to be done, and others based on the page type, you could achieve it like this:

$(document).on("pagecreate", "div[data-role=page]", function(event){
    // Every time a page is being created

    if ($(this).attr("id") == "page1") {
        // Only when on #page1
    }
});

$(this) in here is the page on which the creation event has been fired, so you can use it to manipulate itself; it's better to use div[data-role=page] as selector to attach the handler only to divs that have data-role=page

回答2:

If you want to execute functions on all pages, bind it to pagecreate. It will run once for each page created. It's recommened to bind click etc... events on pagecreate.

Also, note that pageinit is deprecated as of jQM 1.4 and replaced with pagecreate.

$(document).on("pagecreate", function () {
  // functions
});

If you want to run specific functions for specific pages, you need to bind it to page id.

$(document).on("pagecreate", "#page_ID", function () {
  // functions
});

Demo

来源：https://stackoverflow.com/questions/21259572/jquery-mobile-1-4-page-multipage-onpagecreate-management-to-avoid-double-trigger

标签

javascript

jquery

jquery-mobile

triggers

multipage