0

In jQuery Mobile 1.4.x, the way page events are handled were changed. As opposed to binding the data-role="page" div to specific page events like pagebeforeshow, etc. - we now bind to a delegate handler. E.g.

Old:

$('#pgOne').on('pagecontainerbeforeshow', function (e) {
    alert('I am now on page one!');
});

$('#pgTwo').on('pagecontainerbeforeshow', function (e) {
    alert('I am now on page two!');
});

New:

$(':mobile-pagecontainer').on('pagecontainerbeforeshow', function (e) {
    alert('...');
});

The new way is awful, since I have no way of defining the event for each page - e.g. I can no longer define the events for #pgOne vs. #pgTwo.

How do I achieve the behaviour in the old example, using the new methodology?

1 Answer 1

1

Have a look at the API Docs: http://api.jquerymobile.com/pagecontainer/#event-beforeshow

You can use ui.toPage to get the page being shown:

$( ".selector" ).on( "pagecontainerbeforeshow", function( event, ui ) {
    alert(ui.toPage.prop("id"));
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.