jquery multiple event handlers

Question

I have defined event handlers according to their classnames in the latest project that I'm working on.

for ex. all element with the class name "foo" should respond in a particular way on change event. and all elements with the class name "bar" should respond in some other way.

Now some of my elements fall under both classes i.e. class="foo bar" and they should respond in both ways. Right now, only one of the event handler function is being called.

How can I make both the responses execute simultaneously.

Short answer, you can't. One will execute before the other. Simultaneous isn't possible, but, both should be executing in the order in which they were raised. Can you give us some code to look at? — The Internet, Oct 02 '12 at 05:16
you can not execute both events `"simultaneously"`. by the way what are these `events`, somehow it also depends on the events — xkeshav, Oct 02 '12 at 05:31

score 14 · Accepted Answer · edited Oct 02 '12 at 05:29

It depends on how you are binding the events. If you are binding them via jQuery and not overwriting the handlers via x.onchange = function() { ... } - all the bound event handlers will get executed. This is because jQuery queues the event handlers instead of overwriting the previous binding(s).

Check this fiddle to see multiple events getting fired:
and

Check this fiddle to see how the event handlers are overwritten causing only the last bound handler to fire

score 5 · Answer 2 · edited May 20 '14 at 19:06

What you want is a variation of "behaviors" pattern.

It lets you to automatically process events on elements with given classes or other attributes.

The usual implementation is to listen to events on "document", and then, by event.target, define the action.

For example: fiddle(http://jsfiddle.net/PRkAr/)

$(document).on('click change', '.foo.bar', function(e) {
  var classes = this.className.split(/\s+/);
  $.each(classes, function(i, cls) {
    handle(e, this, cls);
  })
})

function handle(e, elem, cls) { 
  // example: Event type click on elem DIV with class foo
  alert("Event type " + e.type + " on elem " + elem.tagName + " with class " + cls);
}

Here function handle with process all events on elements with classes of your choice. If you wish to add other events or classes, just append them into the "on" list.

jquery multiple event handlers

2 Answers2

Linked