Delegování v jQuery

Pokud jste studovali JavaScript, již jste se setkali s tématem delegování událostí, pomocí kterého je možné se například zbavit problémů při přidělování událostí pro nové elementy. Podívejme se, jak to bude vypadat pro jQuery.

Vezměme následující HTML kód:

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

CSS pro něj vypadá takto:

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

Nyní, pomocí metody on, budeme vázat metodu click ne k položce seznamu li, jak jsme dělali v předchozích lekcích, ale k samotnému seznamu ul. Také předáme druhým (volitelným) parametrem 'li' jako selektor potomků. Podívejme se, co jsme získali:

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

Je dán ul, v něm několik li. Pod ul vytvořte tlačítko, po jehož stisknutí na konec ul bude přidána nová li s textem 'položka'. Zařiďte, aby při kliknutí na každou li se jí na konec přidal '!'. To musí fungovat i pro nově přidané li. Úlohu vyřešte pomocí delegování (tj. událost musí být přidělena na ul).

Je dána tabulka s uživateli se dvěma sloupci: jméno a příjmení. Pod tabulkou vytvořte formulář, pomocí kterého bude možné přidat nového uživatele do tabulky. Zařiďte, aby při kliknutí na libovolnou buňku se objevil prompt, pomocí kterého je možné změnit text buňky. Úlohu řešte pomocí delegování (tj. událost musí být přidělena na table).