2010-04-20 18 views
5

Necesito adjuntar un único controlador de eventos a múltiples elementos DOM usando jQuery. Actualmente estoy logrando esto usando el método each() de jQuery. Vea debajo:¿La manera más corta de unir múltiples elementos DOM a un manejador de eventos usando Jquery?

$([elm1, elm2, elm3]).each(function() { 
    this.click(eventHandler); 
}); 

Me preguntaba si hay una manera de hacer esto sin usar cada método y cierre. Pensé que iba a ser capaz de hacer algo como:

$(elm1, elm2, elm3).click(eventHandler); 

Este tipo de declaración funciona usando Prototype.js pero no en jQuery.The razón por la que la pregunta es porque después de usar tanto Prototype.js y jQuery tengo descubrí que jQuery requiere declaraciones más simples para lograr las mismas tareas en casi todas las áreas, así que supongo que debe haber una forma mejor de hacerlo.


ACTUALIZACIÓN

Después de una cierta depuración resulta que mi original intento de hacer esto usando:

$([elm1, elm2, elm3]).click(eventHandler); 

estaba fallando becuase las variables elm1, elm2 y elm3 donde creado usando jQuery $ función. Así que el problema ha cambiado y es por eso hace lo siguiente no funciona:

var elm1 = $('#elm1'); 
var elm2 = $('#elm2'); 
var elm3 = $('#elm3'); 

$([elm1, elm2, elm3]).click(eventHandler); 

sin embargo, el uso de DOM el siguiente hace:

var elm1 = document.getElementById('elm1'); 
var elm2 = document.getElementById('elm2'); 
var elm3 = document.getElementById('elm3'); 

$([elm1, elm2, elm3]).click(eventHandler); 
+0

@Camsoft: como dijiste que 'elm1 elm2 elm3' se creó usando' $ '(significa dinámicamente), puedes usar la función en vivo de jquery para ellos como lo mencioné anteriormente. – Sarfraz

+0

@Sarfra Ok, bien, parece que no entiendo completamente qué está haciendo jQuery aquí. Básicamente, las variables elm1, elm2 y elm3 son argumentos de funciones, por lo que tal vez sean objetos DOM nativos o versiones de jQuery, dependiendo de qué se utilice cuando se llame a la función. – Camsoft

Respuesta

6

Usted puede hacer esto lo más corto posible de esta manera:

$([elm1, elm2, elm3]).click(eventHandler); 

Al salir fuera de los soportes para la matriz, que está llamando un different overload of jQuery(), con los soportes que estás pasando 1 argumento como una matriz , entonces llamas al constructor jQuery(elementArray).

+0

Extraño porque esto es lo primero que intenté. Sabía que el segundo argumento de la función jQuery era scope, por lo que intenté pasar los elementos en una matriz como primer argumento, pero no puedo hacerlo funcionar. ? – Camsoft

+0

Parece que descubrí lo que no funciona. Parece que lo anterior funciona bien cuando paso los elementos DOM que se instancian utilizando document.getElementById(), pero en realidad estoy pasando las versiones de jQuery usando $ ('# elm1') etc. – Camsoft

+0

@Camsoft - En ese caso, 'elem1. agregue (elem2) .add (elem3) 'pero me gustaría ver cómo está obteniendo esta colección para empezar, probablemente pueda acortarla allí. También puede hacer '$ (" # elem1, # elem2, # elem3 ")' –

1

Esto debería hacer el truco:

$([elm1, elm2, elm3]).bind('click', function(){ 
    // your code here..... 
}); 

ofertas JQuery incluso hacer que el código anterior sea más corto, para que pueda omitir el bind allí:

$([elm1, elm2, elm3]).click(function(){ 
    // your code here 
}); 
+1

Eso no funcionará. '$' toma dos argumentos, un elemento/selector y un contexto. El OP tuvo la idea correcta con '$ ([...])'. Y, btw, '$(). Click (...)' es exactamente lo mismo que '$(). Bind ('click', ...)'. – James

+0

No puede llamar a 'live' en una matriz de elementos. No importa si se generan dinámicamente. – SLaks

+0

También vale la pena señalar que su ejemplo '.live()' no funcionará. Está usando elementos DOM, no un selector, y '.live()' funciona completamente fuera de un selector, lee la parte de Advertencias de la documentación '.live()' para más detalles: http://api.jquery.com/live/ –

Cuestiones relacionadas