Delegovanie v jQuery

Ak ste študovali JavaScript, už ste sa stretli s témou delegovania udalostí, pomocou ktorého sa môžete napríklad zbaviť problémov pri pridávaní udalostí pre nové prvky. Pozrime sa, ako to bude vyzerať v jQuery.

Vezmime si nasledujúci HTML kód:

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

CSS preň vyzerá takto:

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

Teraz, pomocou metódy on, pripojíme metódu click nie k položke zoznamu li, ako sme to robili v predchádzajúcich lekciách, ale k samotnému zoznamu ul. Tiež predáme druhým (voliteľným) parametrom 'li' ako selektor potomkov. Pozrime sa, čo sme dostali:

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

Daný je ul, v ňom je niekoľko li. Pod ul urobte tlačidlo, po stlačení ktorého do konca ul bude pridaná nová položka li s textom 'položka'. Zaistite, aby pri kliknutí na každú položku li sa jej na koniec pridala '!'. Musí to fungovať aj pre novo pridané položky li. Úlohu riešte pomocou delegovania (to znamená, že udalosť musí byť pripojená na ul).

Daná je tabuľka s používateľmi s dvoma stĺpcami: meno a priezvisko. Pod tabuľkou urobte formulár, pomocou ktorého bude možné pridať nového používateľa do tabuľky. Zaistite, aby pri kliknutí na ľubovoľnú bunku sa objavil prompt, pomocou ktorého je možné zmeniť text bunky. Úlohu riešte pomocou delegovania (to znamená, že udalosť musí byť pripojená na table).