CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Alex
Alex

Reputation: 68492

Bind a function on multiple jQuery elements at once

I have 3 jquery objects:

var a = $('.el1');
var b = $('.el2');
var c = $('.el3');

And I want to bind a "change" event to all of them at once, but I can't :(

$(a, b, c).bind('paste input change', function(){ ... }); simply doesn't work...

But if bind it to each element separately it works:

a.bind('...');
b.bind('...');
c.bind('...');

Is it possible to do this in a shorter way?

(And without passing the classes as selectors)

Upvotes: 9

Views: 7000

Answers (4)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

$([a,b,c]).bind should work, as in:

var a = $('.el1');
var b = $('.el2');
var c = $('.el3');

$([a,b,c]).each(function(idx){
    $(this).bind('click', function(){
       alert($(this).text());
    });
});

Upvotes: 6

Todd
Todd

Reputation: 1882

Try this:

$('.el1, .el2, .el3').bind(....)

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816442

Use .add() [docs]:

a.add(b).add(c).bind(...

Upvotes: 22

GolezTrol
GolezTrol

Reputation: 116110

Use $('.el1, .el2, .el3').bind(.....

Another solution is to combine them later:

var d = a;
d.add(b);
d.add(c);

d.bind(....

And if you don't like that either, if you would call the separate binds after all, you can choose to declare a named function once, and refer to that, instead of declaring the same anonymous inline function three times.

Upvotes: 2

Related Questions