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:

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

CSS dla niego wygląda tak:

li {
	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:

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

Dany jest ul, w nim kilka li. Pod ul zrób przycisk, po naciśnięciu którego na koniec ul będzie dodawany nowy li z tekstem 'punkt'. Zrób tak, aby po kliknięciu na każdy li, do jego końca był dodawany '!'. Ma to działać również dla nowo dodanych li. Zadanie rozwiąż za pomocą delegowania (to znaczy zdarzenie musi być powiązane z ul).

Dana jest tabela z użytkownikami z dwiema kolumnami: imię i nazwisko. Pod tabelą zrób formularz, za pomocą którego będzie można dodać nowego użytkownika do tabeli. Zrób tak, aby po kliknięciu na dowolną komórkę pojawiał się prompt, za pomocą którego można zmienić tekst komórki. Zadanie rozwiąż za pomocą delegowania (to znaczy zdarzenie musi być powiązane z table).