Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 705
aayush shrestha Avatar asked Oct 02 '12 05:10

aayush shrestha


People also ask

Can you add multiple events to .on jQuery?

The . on() method provides several useful features: Bind any event triggered on the selected elements to an event handler. Bind multiple events to one event handler.

Can we use multiple selectors in jQuery?

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.

How do I pass multiple events in JavaScript?

mouseMoveHandler, false); JQuery's bind allows multiple events, like so: $(window). bind('mousemove touchmove', function(e) { //do something; });


2 Answers

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

like image 145
techfoobar Avatar answered Sep 26 '22 03:09

techfoobar


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.

like image 40
Ilya Kantor Avatar answered Sep 26 '22 03:09

Ilya Kantor