2010-04-20 10 views
5

Potrzebuję dołączyć jedną obsługę zdarzeń do wielu elementów DOM za pomocą jQuery. Obecnie osiągam to za pomocą metody jQuery's each(). Zobacz poniżej:Najkrótszy sposób dołączania wielu elementów DOM do jednej obsługi zdarzeń za pomocą Jquery?

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

Zastanawiam się, czy istnieje sposób, aby to zrobić bez korzystania z każdej metody i zamknięcia. Myślałem, że będę w stanie zrobić coś takiego:

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

Tego rodzaju oświadczenie prace przy użyciu prototype.js ale nie w jQuery.The Dlatego pytam się pytanie, ponieważ po użyciu zarówno prototype.js i jQuery Mam Zauważyłem, że jQuery wymaga prostszych instrukcji, aby osiągnąć te same zadania niemal w każdym obszarze, więc zakładam, że musi być lepszy sposób na zrobienie tego?


UPDATE

Po pewnym debugowania okazuje się, że mój oryginalny próba to zrobić przy użyciu:

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

Was braku becuase zmienne elm1, elm2 i elm3 gdzie tworzone przy użyciu jQuery Funkcja $. Tak więc problem nie zmieniło i dlaczego nie następujące prace:

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

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

jeszcze użyciu DOM następujące robi:

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

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

@Camsoft: jak powiedziałeś 'elm1 elm2 elm3' zostały utworzone za pomocą' $ '(oznacza dynamicznie), możesz użyć funkcji live jquery dla nich, jak wspomniałem wcześniej. – Sarfraz

+0

@Sarfra Ok well wydaje się, że nie w pełni rozumiem, co robi jQuery tutaj. Zasadniczo zmienne elm1, elm2 i elm3 są argumentami funkcji, więc mogą być natywnymi obiektami DOM lub wersjami jQuery w zależności od tego, co jest używane, gdy funkcja jest wywoływana. – Camsoft

Odpowiedz

6

Można to zrobić możliwie jak najkrótszy tak:

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

Po wyjściu poza wsporniki do tablicy, jesteś wywołanie different overload of jQuery(), ze wspornikami jesteś przejazdem 1 argumentu jako tablicę , więc dzwonisz do konstruktora jQuery(elementArray).

+0

Dziwne, ponieważ to pierwsza rzecz, którą próbowałem. Byłem świadomy, że drugi argument funkcji jQuery był zasięgiem, więc próbowałem już przekazać elementy w tablicy jako pierwszy argument, ale nie mogę go uruchomić. ? – Camsoft

+0

Wygląda na to, że dowiedziałem się, co nie działa. Wygląda na to, że powyższe działa dobrze, gdy przekazuję elementy DOM, które są tworzone za pomocą document.getElementById(), ale faktycznie przekazuję wersje jQuery za pomocą $ ('# elm1') itd. – Camsoft

+0

@Camsoft - W takim przypadku 'elem1. add (elem2) .add (elem3) 'ale przyjrzę się, jak zaczynasz tę kolekcję, prawdopodobnie możesz ją skrócić. Możesz także zrobić '$ (" # elem1, # elem2, # elem3 ")' –

1

To powinno załatwić sprawę:

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

JQuery oferty nawet krótszy kod, więc można pominąć bind: tam:

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

To nie zadziała. '$' przyjmuje dwa argumenty, element/selektor i kontekst. OP miał dobry pomysł z '$ ([...])'. I, przy okazji, '$(). Click (...)' jest dokładnie takie samo jak '$(). Bind (" kliknij ", ...)'. – James

+0

Nie możesz wywołać 'live' na tablicy elementów. Nie ma znaczenia, czy są generowane dynamicznie. – SLaks

+0

Warto również zauważyć, że Twój przykład '.live()' nie zadziała. Używa elementów DOM, a nie selektora, a '.live()' działa całkowicie poza selektorem, przeczytaj część "Ostrzeżenia" w dokumentacji '.live()', aby poznać szczegóły: http://api.jquery.com/live/ –

Powiązane problemy