CODEWITHSUNDEEP
javascriptjqueryeventsevent-handling
aayush shrestha
aayush shrestha

Reputation: 1918

jquery multiple event handlers

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.

Upvotes: 9

Views: 14568

Answers (2)

Ilya Kantor
Ilya Kantor

Reputation: 589

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.

Upvotes: 5

techfoobar
techfoobar

Reputation: 66693

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

Upvotes: 14

Related Questions