0

I'm using jquery mobile v1.3.2

For some reasons I want to set an global pagechange event to prepare all of my pages : 

var Front = {

    initDom : function($dom) {

       // here i can bind some events in my page

       $(".someButton",$dom).bind("tap",function(){
           alert("some actions");
       });

       // etc.....

    });

}

$(document).on("pagechange", function(event, data) {     
    Front.initDom($(data.toPage));
});

This works well. But it is triggered at each page change. And some times it will init the same event twice and that will lead to some bugs.

Now i have tested to do it with the event pageinit or pagecreate but both are triggered before the page is ready and $("ui-page-active"); is empty.

I have though about some setTimeout, but that's definitively a bad idea.

I have also though to init everything at the first pageinit and unbind it. But ajax called page wont be bound.

It there some good workarround ?

gsouf
  • 901
  • 10
  • 25
  • If you want to do something once to first page and only when DOM is ready, use `.one("pagebeforeshow")` or `pageshow`. To add bindings/attach listeners, use `pageinit` delegated to page by its' ID. – Omar Nov 04 '14 at 14:55
  • Yes it would work, but i'm doing this globally. For all the pages. Not only for certain pages. – gsouf Nov 04 '14 at 14:56
  • it depends on what you want to do. http://stackoverflow.com/a/20459433/1771795 – Omar Nov 04 '14 at 15:41

1 Answers1

1

You can use pageinit and then get the id of the page from the event target object:

$(document).on("pageinit", function(e){
    alert(e.target.id);
});

DEMO

ezanker
  • 24,628
  • 1
  • 20
  • 35