jqm 页面切换事件监听

参考http://jsfiddle.net/kiliman/aAanV/

    

        

            
Page 1
        
        

            Place content here
            Go to page 2
            Change color
        
        

            
Footer
        
    
    

        

            
Page 2
        
        

            Place content here
        
        

            
Footer
        
    

$(document).bind('mobileinit', function() {
    alert('mobileinit');
});

$(function() {
    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'));
    });
    $('#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);
        });

    });
});
// have to manually write script tag since jsFiddle loads external 
// scripts before our code and we need to bind to mobilinit before
// jquery.mobile is loaded
document.write('');