2010-04-20 10 views
5

Ho bisogno di collegare un singolo gestore di eventi a più elementi DOM usando jQuery. Attualmente sto ottenendo questo utilizzando il metodo each() di jQuery. Vedi sotto:Il modo più breve per collegare più elementi DOM a un gestore di eventi usando Jquery?

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

Mi chiedevo se c'è un modo per farlo senza utilizzare ogni metodo e chiusura. Ho pensato di essere in grado di fare qualcosa di simile:

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

Questo tipo di affermazione funziona utilizzando Prototype.js ma non nella ragione jQuery.The faccio la domanda è perché dopo aver usato sia Prototype.js e jQuery ho ho scoperto che jQuery richiede istruzioni più semplici per ottenere gli stessi compiti in quasi tutte le aree, quindi presumo che ci sia un modo migliore per farlo?


UPDATE

Dopo un po 'di debug si scopre che il mio tentativo originale per fare questo usando:

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

stava fallendo becuase le variabili elm1, elm2 e elm3 dove creati utilizzando jQuery di $ funzione. Quindi il problema è cambiato ed è perché il non seguenti lavori:

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

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

ancora usando DOM la seguente fa:

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

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

@Camsoft: come hai detto 'elm1 elm2 elm3' sono stati creati usando' $ '(significa in modo dinamico), potresti usare la funzione live del jquery per loro come avevo menzionato in precedenza. – Sarfraz

+0

@Sarfra Ok, sembra che non capisco appieno ciò che jQuery sta facendo qui. Fondamentalmente le variabili elm1, elm2 ed elm3 sono argomenti di funzione, quindi potrebbero essere oggetti DOM nativi o versioni jQuery dipendenti da ciò che viene usato quando viene chiamata la funzione. – Camsoft

risposta

6

Si può fare questo più breve possibile in questo modo:

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

Quando si lascia fuori le staffe per l'array, si sta chiamando un different overload of jQuery(), con le staffe che stai passando 1 argomento come una matrice , quindi chiami il costruttore jQuery(elementArray).

+0

Strano perché questa è la prima cosa che ho provato. Sapevo che il secondo argomento della funzione jQuery era scope, quindi ho già provato a passare gli elementi in un array come primo argomento, ma non riesco a farlo funzionare. ? – Camsoft

+0

Sembra che ho scoperto cosa non funziona. Sembra che quanto sopra funziona bene quando passo elementi DOM che sono istanziati usando document.getElementById() ma sto effettivamente passando versioni jQuery usando $ ('# elm1') ecc. – Camsoft

+0

@Camsoft - In questo caso, 'elem1. aggiungi (elem2) .add (elem3) 'ma guarderei come stai iniziando questa collezione, probabilmente puoi accorciarla lì. Puoi anche fare '$ (" # elem1, # elem2, # elem3 ")' –

1

Questo dovrebbe fare il trucco:

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

JQuery offerte anche per rendere il codice sopra più breve, in modo da poter omettere il bind lì:

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

Che non funzionerà. '$' accetta due argomenti, un elemento/selettore e un contesto. L'OP ha avuto l'idea giusta con '$ ([...])'. E, btw, '$(). Click (...)' è esattamente uguale a '$(). Bind ('click', ...)'. – James

+0

Non è possibile chiamare 'live' su un array di elementi. Non fa differenza se sono generati dinamicamente. – SLaks

+0

Vale anche la pena notare che l'esempio di '.live()' non funzionerà. Usa gli elementi DOM, non un selettore, e '.live()' opera completamente fuori da un selettore, legge la parte Caveats della documentazione '.live()' per i dettagli: http://api.jquery.com/live/ –

Problemi correlati