14 stycznia została wydana wersja 1.3 jednego z najpopularniejszych frameworków javascriptowych – jQuery. Jak dobrą i wygodną biblioteką jest jQuery wszyscy czytający pewnie wiedzą. Jedną z ciekawszych nowości w jQuery 1.3 są live events.

Wyboraźmy sobie, że mamy do stworzenia kilka elementów i wstawienia ich w DOM. Jeśli te elementy mają mieć określone eventy, to przy każdym wstawieniu do drzewa DOM musimy im dodatkowo przypisać pożądane funkcje pod określone eventy. Bywa to momentami męczące i błędogenne i właśnie na tego typu operacje lekarstwem są live events.

Live jest niczym innym jak przypięciem funkcji pod zdarzenie, podobnie jak .click(), .mouseover() czy .submit(), z tą różnicą, że podana funkcja będzie przypinana do tych zdarzeń również dla nowo tworzonych elementów pasujących do selektora, na którym wywołaliśmy funkcję live. Funkcja ta przyjmuje jako pierwszy parametr nazwę eventu, drugim parametrem jest callback.

W poniższym przykładzie, zaprezentuję jak dla diva znajdującego się w kontenerze o id #container przypinamy zdarzenie live, które ma za zadanie stworzyć nowego diva z aktualną datą i  wrzucenie go na koniec kontenera. Wykorzystanie live events gwarantuje, że kliknięcie na którymkolwiek z divów zadziała tak samo, bez konieczności definiowania obsługi zdarzenia przy tworzeniu nowych divów.

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
    $(document).ready( function() {
      $('#container div').live('click', function() {
        $('<div>' + new Date + '</div>').appendTo('#container');
      });
    });
  </script>
</head>
<body>
  <div id="container">
    <div></div>
  </div>
</body>

Przykład działania: http://sznapka.pl/example/jquery_live_events.html

Za odkrycie live events podziękowania należą się mojemu koledze z biurka naprzeciwko – Sebastianowi 🙂