Apply same handler to multiple jQuery objects

Question

I know I can use $.each to apply the same event handler to two different jQuery objects. I'm surprised it was not possible to have a cleaner syntax such as:

  var $span = $('span');
  var $div = $('div');

  var clickHandler = function () {
    $(this).toggleClass('red');
  }

  $($span, $div).on('click', clickHandler); // <-- Neater syntax
  $([$span, $div]).on('click', clickHandler); // <-- A little worse, but still better than $.each

Why do the syntaxes I have tried not work? Is there a neater alternative to using $.each?

Matt · Accepted Answer · 2013-01-08 11:26:52Z

2

$span.add($div).on('click', clickHandler)

Should do what you want, per the add() docs.

$($span, $div) is being interpreted as $span's which are descendants of $div.
$([$span, $div]) expects the array elements to be DOMElements, not jQuery objects (I've always wished this was possible as well)

You can see both of these syntaxs described in the jQuery documentation

edited Jan 8, 2013 at 11:26

answered Jan 8, 2013 at 11:21

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2013-01-08 11:21:14Z

2

You can use CSS syntax for multiple selectors - the comma ,:

$('span, div').on('click', clickHandler);

Or if you have variables containing the elements, you can use add()

$span.add($div).on('click', clickHandler);

answered Jan 8, 2013 at 11:21

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

jAndy · Accepted Answer · 2013-01-08 11:20:50Z

1

You can also use jQuery's .add()^link method to extend a wrapped set

$span.add( $div ).on( 'click', clickHandler );

answered Jan 8, 2013 at 11:20

jAndy

237k57 gold badges313 silver badges363 bronze badges

Collectives™ on Stack Overflow

Apply same handler to multiple jQuery objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related