Take the 2-minute tour ×

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.

share|improve this question
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 2 '12 at 5:16
you can not execute both events "simultaneously". by the way what are these events, somehow it also depends on the events –  diEcho Oct 2 '12 at 5:31
add comment

2 Answers

up vote 8 down vote accepted

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:

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

share|improve this answer
add comment

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:

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

function handle(e.type, 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.

share|improve this answer
add comment

Your Answer


