Question

I’m working on a mobile-friendly website using jQuery Mobile but would like to do it using multiple HTML files, each with one data-role=”page” div (instead of multiple data-role=”page” divs in one file as seems to be the standard), because this allows for maximum reuse of the existing site. I know the whole data-ajax=”false” concept that I could use on the main page’s <a> tags, but that disables the page transition effects, which we really like.

I’ve tried pageshow, pagebeforeshow, pageinit, document.ready, etc. but none of that ever fires unless I go to that page directly, as opposed to following a link from the main page i.e. the TOC (or refreshing the page after following a link from the TOC). So basically, my JS file looks like:

('div[data-role="page"]:first').live('pageshow',function(){ /*do custom stuff here */})

I also tried adding the reference to this JS file onto the TOC page but no luck … which I kind of expected but I figured I’d try. I find it hard to believe that JQM simply doesn’t support doing the site this way (without losing the transition effects), so I’m probably missing something simple.

Answer 1

1. .live() is depreciated, so use .delegate(): http://api.jquery.com/on
2. You should bind to IDs rather than using multiple pseudo-selectors (I think this is your problem, that your complex selector may not be valid for event delegation):

.

$(document).delegate('#my-page-id', 'pageinit', function () {
    //you can now do work for the `#my-page-id` pseudo-page
});

If you want to bind to all of the pseudo-pages to do something globally you can use:

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    //you can now do work for all the `[data-role="page"]` "pages"
});

Or you could put classes on the different data-role="page" elements to specify which one you want to bind to.