jQuery multiple click handlers..how to ensure order of firing?

Question

I have 2 click handlers binded to an element like so:

in the file which contains the control I am binding to, I have the first handler, which does some functionality specific to that control

$("#mycontrol").live("click", function() { alert("foo"); });

In the main page which uses that control, I have another handler binding to that element for page specific functionality

$("#mycontrol").live("click", function() { alert("bar"); });

I use 'live' because AJAX calls are changing the control all the time, so the handlers will be reregistered. However I need a way so that "foo" happens before "bar" consistently...any suggestions?

Answer 1

Try combining the click events into one:

function foo() { alert("foo"); }
function bar() { alert("bar"); }
$("#mycontrol").live("click", function(){ foo.call(this); bar.call(this); });

Answer 2

How's about:

$("#mycontrol").live("click", doFooBar);

function doFooBar() {
    alert("foo");
    alert("bar");
}

Answer 3

You could do something like the following:

var arrEventHandlers = [];

function registerClickEvent(fnCallback)
{
    arrEventHandlers.push(fnCallback);
}

registerClickEvent (function () { alert ("Foo"); });
registerClickEvent (function () { alert ("Bar"); });

function clickHandler ()
{
    for (var i = 0, size = arrEventHandlers.length; i < size; i++)
    {
        arrEventHandlers[i].apply (...);
    }
}

$("#mycontrol").live("click", clickHandler);