jQuery page on/live/bind pageinit, pageshow

Question

I'm working on application with jQuery mobile, I'm trying to put all the pages in userpanel into one big file and run it by one big .js file. What I don't know is if I can write my .js file in this way:

to initialize when userpanel is loaded

$(document).on('pageinit', function(){

});

and than when certain page will be called by id if I can put this:

$("#userpanel").on('pageshow', function(){

});

inside the first one like this for each and every page:

$(document).on('pageinit', function(){

    $("#userpanel").on('pageshow', function(){

    });

    $("#*********").on('pageshow', function(){

    });

    $("#*********").on('pageshow', function(){

    });

});

And so on, is this how it works or do I misunderstand basic concept of jQuery/JS? If yes what is a good way?

Answer 1

First of all do not use page events as a children of other page events, there were not meant to work like that. In this case, all those pageshow events will trigger normally without their parent pageinit.

Here's a working jsFiddle example.

To find out more about jQuery Mobile page events take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.

So correct way to declare page events would be like this:

$("#userpanel").on('pagebeforeshow', function(){

});

$("#userpanel").on('pageshow', function(){

});

$("#userpanel").on('pagebeforeshow', function(){

});

$("#userpanel").on('pageshow', function(){

});

$("#userpanel").on('pagebeforeshow', function(){

});

$("#userpanel").on('pageshow', function(){

});