Question

I need to delay the execution of the 2nd function crumble() after stackUp() has run.

I have tried setting an event-order with pagechange vs. pagebeforeshow like this:

$('div:jqmData(role="page")').bind( "pagechange", function( event, data) {
   stackUp(event, data);
});

$('div:jqmData(role="page")').live('pagebeforeshow', function(event, data){
     crumble(event, data, $(this) );
});

Doesn’t work and setTimeout like this:

$('div:jqmData(role="page")').live('pagebeforeshow', function(event, data){
     window.setTimeout(function (event, data, $(this)) {
       crumble(event, data, $(this) );
     },500);
});

makes $(this) undefined, so this also doesn’t help either.

Question:
How can I make sure crumble fires when stackup is done?
Is $(this) becoming undefined, because it’s window.setTimeout() (and not $(this).setTimeout)?
What’s the correct event-order in jquery-mobile?

Big THANKS! for help.

Answer 1

Your setTimeout function makes no sense. That’s not even valid syntax – $(this) can’t be a function parameter name!

What you’re looking for is:

$('div:jqmData(role="page")').live('pagebeforeshow', function(event, data) {
    var $this = $(this);
    window.setTimeout(function() {
        crumble(event, data, $this);
    }, 500);
});