Attaching an event to multiple items at a time

Question

Say I have the following:

var a = $("#a"); var b = $("#b"); //I want to do something as such as the following : $(a,b).click(function () {/* */}); // <= does not work //instead of attaching the handler to each one separately 

Obviously, this does not work, because in the $ function the second argument is context and not another element.

So how can I attach an event to both elements in one go?

---

[Update]

peirix posted an interesting snippet in which he combines elements with the & ; But I noticed this:

 $(a & b).click(function () { /* */ }); // <= works (event is attached to both) $(a & b).attr("disabled", true); // <= doesn't work (nothing happens) 

From what you can see above, apparently, the combination with the & sign only works when events are attached ...?

Answer 1

jQuery add method is what you want:

Adds more elements matching this expression to a set of matched elements

 var a = $("#a"); var b = $("#b"); var combined = a.add(b) 

Answer 2

Remember that jQuery selectors support CSS comma syntax. If you need to combine two arbitrary collections, all the other sentences are on the mark, but if it is as simple as doing something with the elements with identifiers a and b , use $('#a,#b') .

Answer 3

This question has already been answered, but I think that a simpler, simpler way to achieve the same goal would be to rely on the similarities between the jQuery selector model and CSS and just do:

 $("#a, #b").click(function () {/* */}); 

I often use this and have never seen it not working (I cannot talk about jQuery versions prior to 1.3.2, although, as I did not test it). Hope this ever helps someone.

---

UPDATE: I just re-read the stream and missed the comment you made that the specified nodes were already saved for variables, but this approach will still work with one minor tweek. you will want to do:

 var a = $("#a"); var b = $("#b"); $(a.selector+", "+b.selector).click(function () {/* */}); 

One of the great things jquery does is that it adds some special jQuery properties to the returned node (a selector, which is the original selector used to capture that node is one of them). You may run into some problems with this if your selector already contains commas. Maybe it's also possible if it's easier than just adding add, but its an interesting example of how cool jquery can be :).

Answer 4

You can simply put them in an array:

 $.each([a, b], function() { this.click(function () { }); }); 

Answer 5

Why don't you use an array? This works on my side:

 $([item1, item2]).on('click', function() { // your logic }); 

Answer 6

I just tried to team up with this and found something very cool:

 $(a & b).click(function() { /* WORKS! */ }); 

supersweet!

Edit: Now I'm really confused by not testing it correctly. What does this mean, in fact, was to put the click event on everything ... Do not know why this happens, though ...

Answer 7

You can also create a class name and provide each element that you want to work with this class. You can then bind the event to all elements that share this class.

 <p><a class="fakeClass" href="#">Click Me!</a></p> <p><a class="fakeClass" href="#">No, Click Me!</a></p> <div class="fakeClass">Please, Click Me!</div> <script type="text/javascript"> $(function () { $(".fakeClass").on("click", function () { alert("Clicked!"); }); }) </script> 

Answer 8

try the following: sweet and simple.

 var handler = function() { alert('hi!'); } $.each([a,b], function() { this.click(handler); } 

By the way, this method is not worth the problem.

If you already know that there are only two of these methods, then I think that the best option would be

 a.click(handler); b.click(handler); 

Hurrah!

Answer 9

Example:

 $("[name=ONE_FIELD_NAME], [name=ANOTHER_FIELD_NAME]").keypress(function(e){alert(e.which);});