Delegowanie w jQuery

Jeśli uczyłeś się JavaScriptu, to już spotkałeś się z tematem delegowania zdarzeń, za pomocą którego można, na przykład, pozbyć się problemów przy dodawaniu zdarzeń dla nowych elementów. Spójrzmy, jak to będzie wyglądać w jQuery.

Weźmy następujący kod HTML:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

CSS dla niego wygląda tak:

cssli {
  width: 100px;
  cursor: pointer;
}

Spróbujmy teraz, za pomocą metody on, powiązać metodę click nie z elementem listy li, jak robiliśmy to w poprzednich lekcjach, a z samą listą ul. Przekażemy również drugim (opcjonalnym) parametrem 'li' jako selektor elementów potomnych. Zobaczmy, co wyszło:

javascript$('ul').on('click', 'li', function() {
  $(this).append('!');
});