10

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?

Jakub Zak
  • 1,212
  • 6
  • 32
  • 53

1 Answers1

3

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(){

});
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    Is there way to add script which would run only at the actual load of the .html file, but not when I'm switching between pages inside the file? – Jakub Zak Feb 02 '13 at 00:50
  • 1
    Logic is the same, just give them an id, only different thing is they must be loaded/initialized in a first HTML file. – Gajotres Feb 02 '13 at 04:37