Say I have these variables:
var container = $("div#my-awesome-section"); var foo_input = $("input[name=foo]", container); var bar_input = $("input[name=bar]", container); I want to bind an event handler to both inputs. I hoped this would work:
$([foo_input, bar_input]).on("keypress", function() { /* ... */ }); But alas, no. Is there a convenient way of gathering multiple jQuery objects into one for purposes like this?
use in add() in jquery for adding jquery object
foo_input.add(bar_input).on("keypress", function() { /* ... */ }); Solution 1:
for using with object, you need to use .add()
Create a new jQuery object with elements added to the set of matched elements.
foo_input.add(bar_input).on("keypress", function() { /* ... */ }); Solution 2:
also you can simply use comma separated multiple selector:
$("input[name=foo],input[name=bar]", container).on("keypress", function() { /* ... */ }); 
.add(). see the first part.You can also try this:
$.each([foo_input, bar_input], function() { /* ... */ }); See JSFiddle.
In your case use:
$.each([foo_input, bar_input], function() { $(this).on("keypress", function() { /* ... */ }); }); Reading the docs for jQuery's add() function, I noticed that my original attempt was almost correct. It is possible to initialize a jQuery object with an array of DOM Elements, so I could do this:
$([foo_input[0], bar_input[0]]).on("keypress", ... I highly prefer the add() function though.