Colocación de un evento de múltiples elementos en una sola vez

Question

Decir que tengo el siguiente:

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 

Obviamente lo anterior no funciona porque en la función $, el segundo argumento es la context, no otro elemento.

Entonces, ¿cómo puedo adjuntar el evento a ambos elementos de una vez?

---

[Actualización]

peirix publicó un fragmento interesante en la que combina elementos con el signo &; Pero algo me di cuenta de esto:

$(a & b).click(function() { /* */ }); // <= works (event is attached to both) 

$(a & b).attr("disabled", true); // <= doesn't work (nothing happens) 

De lo que se puede ver arriba, al parecer, la combinación con el signo & sólo funciona cuando se conecta eventos ...?

Answer 1

El jQuery add method es lo que quiere:

añade más elementos, emparejados por la expresión dada, al conjunto de elementos coincidentes

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

Answer 2

Sólo les podría poner en una matriz:

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

Answer 3

prueba esto: sweet and simple.

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

Por cierto, este método no vale la pena.

Si ya sabe que hay sólo dos de estos métodos, entonces creo que la mejor opción sería

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

Salud!

Answer 4

Acabo de intentar jugar un poco con esto, y encontró algo muy fresco:

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

supersweet!

Edit: Ahora me siento realmente avergonzado por no probar esto correctamente. Lo que hizo, en realidad fue poner el evento click en todo ... No estoy seguro de por qué lo hace, aunque ...

Answer 5

No olvide que los selectores jQuery admiten la sintaxis de la coma CSS. Si necesita combinar dos colecciones arbitrarias, las sugerencias de los demás están en la marca, pero si es tan simple como hacer algo con los elementos con los ID a y b, use $('#a,#b').

Answer 6

Esta pregunta ya ha sido contestada, pero creo que una forma más aerodinámica más simple para lograr el mismo objetivo sería que depender de las similitudes entre jQuery y el modelo de selección de CSS y sólo hago:

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

utilizo esto con frecuencia, y nunca lo he visto funcionar (no puedo hablar de las versiones de jQuery anteriores a la 1.3.2, ya que no he probado esto allí). Espero que esto ayude a alguien algún día.

---

ACTUALIZACIÓN: acabo de releer el hilo, y se perdió el comentario que hizo acerca de tener los nodos en cuestión ya guardada fuera de las variables, pero este enfoque seguirá funcionando, con una tweek menor. tendrá que hacer:

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

Una de las cosas interesantes que jQuery hace es que añade propiedades específicas algunos jquery al nodo que vuelve (selector, que es el selector original utilizado para agarrar ese nodo es uno de ellos). Puede encontrar algunos problemas con esto si el selector que utilizó ya contiene comas. También es probable que sea discutible si esto es más fácil que usar add, pero es un ejemplo divertido de lo genial que puede ser jquery :).

Answer 7

¿Por qué no utiliza una matriz? Esto funciona en mi lado:

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

Answer 8

También puede recuperar un nombre de clase y dar a cada elemento que se desea trabajar con esa clase. Luego puede vincular el evento a todos los elementos que comparten esa clase.

<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 9

Ejemplo:

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