How to attach a event to a jQuery mobile page using on() and off()?

Question

I'm trying to upgrade to lasted Jquery 1.7.1 (using JQM 1.1pre).

I used to be able to bind to a JQM page like this:

$('#mypage').live('pageshow', function() { /* do stuff */ })

Per Jquery 1.7.1 this would now have to be:

$('#mypage').on('pageshow', function() { /* do stuff */ })

Or if the page is dynamically inserted

$('body').on('pageshow', '#mypage', function() { /* do stuff */ })

Questions:
- Is this syntax correct for jquery 1.7+?
- I cannot get the events to fire at all in JQM using this. I have tried $('div:jqmData(role="page")#mypage but this also does not seem to work. What would be the correct syntax to attach some functionality to a specific JQM page only?

Thanks for help!

EDIT:
Some meddling later it seems you can only call on() and off() on $('div:jqmData(role="page")'). Calling on a respective #pageID does not work. In a multipage layout binding like this will fire once per page, so if you have 10 pages in your multipage document, this:

$('div:jqmData(role="page")').on('pageshow', function() {
   // do stuff
   });

will fire 10 times or once per page in a multipage document.

I guess this will be adressed by JQM before 1.1 will be released. In the meantime, I use this as a sort-of-workaround to make sure stuff is only attached once.

$('div:jqmData(role="page")').on('pageshow', function() {
   console.log("one");

   if ( $('.element').length > 0 && $('.element').jqmData('bound') != true) {       
     $('.element').jqmData('bound',true);
     $('.element').on('click', function() { /* button click handler */ });  
     }
   });

I'm checking for length so the code only runs if .element is on the respective page and whether it hasn't been bound already. You can also use this to off() .element on pagebeforehide. Just don't forget to reset jqmData('bound'), so on the next pageshow it can be re-bound.

Answer 1

You should be able to use $.on() to bind to all pages, as well as specific pages. I've created a sample here http://jsfiddle.net/kiliman/aAanV/

I've added a pageinit/pageshow handler for ALL pages (to show that pageinit fires once per page, and pageshow fires each time page is shown). I then create a pageinit handler for #page1 to bind a click event handler on a button.

Notice the syntax. $(elements).on('events', 'selector', handler) vs $(elements).on('events', handler);

If you include the selector, then you are delegating the handler to all elements that match the selector. If you DON'T include the selector, then you are binding the handler directly to the elements.

$(function() {
    // setup init/show handler for ALL pages
    var selector = ':jqmData(role=page)';
    $('body')
        .on('pageinit', selector, function(e, data) {
            // initialize page
            var $page = $(this);
            alert('init ' + $page.attr('id'));
        })
        .on('pageshow', selector, function(e, data) {
            // showpage
            var $page = $(this);
            alert('show ' + $page.attr('id'));
        });
    // setup init handler for page1
    $('#page1').on('pageinit', function(e, data) {
        // setup handler
        var $page = $(this);
        $page.find('.colorchanger').click(function() {
            var $content = $page.find('.ui-content'),
                isBodyC = $content.hasClass('ui-body-c');
            $content
                .toggleClass('ui-body-c', !isBodyC)
                .toggleClass('ui-body-e', isBodyC);
        });

    });
});