Question

I have a div called MyDiv. How do I call 2 functions one after the other when the user clicks it?

$('#MyDiv').click(function () {
    action1() // wait until it finishes and call action2
});

action1 is a function in a script that’s loaded in my master page and action2 is a small inline script function that’s different in every page which means I can’t call action2 from action1 because the name action2 will actually be different on every page.

Answer 1

If action1 and action2 aren’t asynchonous, you can just do:

$('#MyDiv').click(function () { action1(); action2() });

If they are asynchonous, you can do a couple of things. Callbacks:

action1 = function(callback) {
  //stuff
  callback();
}
$('#MyDiv').click(function () { action1(this) });

Note you’re not calling action2 when you pass it. Just passing the function.

You could also fire an event from action1 and tell action2 to listen for that event (working from memory here):

action1 = function(element) {
  //stuff
  $(element).trigger('action1_finished')
}
$('#MyDiv').click(function () { action1(this) }).bind('action1_finished', action2)