Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

jQuery on()

Od jQuery 1.7 wszelkie akcje zaleca używać się za pomocą metody on(). W tej wersji live() jest deprecated zaś metoda on() jest zastępstwem dla delegate()

Dużą zaletą metody on() jest to, że radzi sobie z dynamicznymi elementami do których trzeba czasami przypisać jakieś zdarzenie np. kliknięcie.

Przypisywanie zdarzeń

Za pomocą on() można przypisać kilka zdarzeń elementom. Poniżej znajduje się przykład na przypisanie kliknięcia i hovera elementowi:

$("element").on({
   click: function(){
      // * Kliknięcie.
   },
   mouseenter: function(){
      // * stare hover(pierwsza funkcja, ...);
   },
   mouseleave: function(){
       // * stare hover(..., druga funkcja);
   }
});

Proste? Proste.

A teraz przypiszemy samo kliknięcie wszystkim linkom w elemencie #test. Różnica tutaj będzie taka, że zawartość elementu #test będzie mogła się zmienić. Wcześniej można było użyć live() lub delegate(). Od jQuery 1.7 nie ma już problemu z wyborem odpowiedniej metody. Wszystko możemy załatwić jednym on().

$("#test").on('click', 'a', function() {
   // * Kliknięcie, które będzie działać nawet gdy dodamy nowe linki do #test.
});

Kluczowy jest tutaj drugi parametr po nazwie zdarzenia. Podajemy w nim selektor do elementów na których bindowanie zdarzenia ma zawsze działać.

Teraz życie jest o wiele prostsze :).

Prosty przykład do zabaw znajdziecie na jsFiddle.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Marek

10.11.2012 Marek

Skąd informacja o tym, że click() jest deprecated? Oficjalna dokumentacja na http://api.jquery.com/click/ nic o tym nie wspomina.Nie ma tam nawet zalecenia, o którym wspominasz.

Gavatar shpyo

10.11.2012 shpyo

@Marek - dzięki za cynk. Rozpędziłem się z tym deprecated ;). Poprawione.

Gavatar procek

11.11.2012 procek

Panowie,
z .on() jest problem gdy tworzymy dynamicznie elementy - już wiele razy zdarzyło mi się, że musiałem użyć .live(), bo element nie chciał reagować. A było to w jQuery 1.8 :(

Gavatar kicaj

05.01.2013 kicaj

No wlasnie, zatem jak użyć prawidłowo on() dla elementów budowanych dynamicznie?

Gavatar procek

13.02.2013 procek

Może nieco odkopuję stary wątek, ale warto znać odpowiedź na zadane pytanie, bo .live od wersji 1.9 nie ma i trzeba to w końcu zrobić porządnie:

Warto wiedzieć, że .on() może być 3 parametryczny:
Wywołanie na selektorze / obiekcie (który ZAWIERA dodawany wcześniej obiekt)
1. akcja
2. obiekt świeżo dodany do DOMa (zapis "selektora" jako String)
3. funkcja, którą wywołujemy

Przykład:
$('.ResultsList').on('click', 'a', function(event){
console.log(this);
});

Dodaj komentarz