Have Geek Brain

JQuery multiple click handlers. How to ensure the order of fire?

I have two click handlers attached to an element like:

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

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

On the master page using this control, I have a binding to this control to bind to specific pages

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

I use 'live' because the AJAX calls change control all the time, so the handlers will be re-registered. However, I need a way to make "foo" happen before "bar" sequentially ... any suggestions?

+1


a source to share


3 answers


Try combining click events in one:



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


a source


What about:



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

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


a source


You can 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);
+2


a source






More articles:


All Articles