How do I register multiple callbacks for a jQuery event? An example of what I am trying to achieve:
$(document).on("click", ".someclass", CallbackFunction1, CallbackFunction2);
function CallbackFunction1(event) {
//Do stuff
}
function CallbackFunction2(event) {
//Do some other stuff
}
How can I set up the event handler to execute both callback functions when the element is clicked?
You can just attach them as separate event handlers:
$(document).on("click", ".someclass", CallbackFunction1)
.on("click", ".someclass", CallbackFunction2);
Unless I misunderstand what you're asking, you can use a single event handler:
$(document).on('click', '.someclass', function(e){
CallbackFunction1(e);
CallbackFunction2(e);
});
this value of the functions, it doesn't handle return values, and it doesn't check to see if immediate propagation was stopped between calls.
this and allow for return values (that you wouldn't really work with on click event handler as such anyway) would be: CallbackFunction1.apply(this,[e]); CallbackFunction2.apply(this,[e]). I use this methodology often even if only need a single callback. It allows me to decouple my callbacks from relying too heavily on the type of event that generates them.You can use a third function and then recall the other ones:
$(document).on("click", ".someclass", CallbackFunction);
function CallbackFunction(event) {
CallbackFunction1(event);
CallbackFunction2(event);
}
function CallbackFunction1(event) {
//Do stuff
}
function CallbackFunction2(event) {
//Do some other stuff
}
If you will be reusing this to bind different list of handlers for different elements, i would create a factory.
function multiFunction(){
var methods = Array.prototype.slice.call(arguments, 0);
return function(e){
for (var f=0, l = methods.length; f<l; f++) {
methods[f].apply(this, arguments);
}
}
}
and call this like this
$(document)
.on('click', 'someclass', multiFunction( CallbackFunction1, CallbackFunction2));
.on('click', 'someotherclass', multiFunction( CallbackFunction8, CallbackFunction1, CallbackFunction5));
Demo at http://jsfiddle.net/gaby/D8K75/
call to apply so that it can pass all arguments supported by event.