Delegiranje v jQuery

Če ste študirali JavaScript, ste se že srečali s temo delegiranja dogodkov, s katero lahko, na primer, rešite težave pri dodajanju dogodkov novim elementom. Poglejmo, kako bo to izgledalo v jQuery.

Vzemimo naslednjo HTML kodo:

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

CSS zanjo izgleda takole:

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

Zdaj pa bomo z metodo on, vezali metodo click ne na element seznama li, kot smo delali v prejšnjih lekcijah, temveč na sam seznam ul. Prav tako bomo podali kot drugi (neobvezni) parameter 'li' kot selektor potomcev. Poglejmo, kaj smo dobili:

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

Podan je ul, v njem je več li. Pod ul naredite gumb, ob kliku na katerega se na konec ul doda nov li z besedilom 'punkt'. Poskrbite, da bo ob kliku na vsak li, na njegov konec dodan '!'. To naj deluje tudi za na novo dodane li. Nalogo rešite s pomočjo delegiranja (to pomeni, da mora biti dogodek dodan na ul).

Podana je tabela z uporabniki z dvema stolpcema: ime in priimek. Pod tabelo naredite obrazec, s pomočjo katerega lahko dodate novega uporabnika v tabelo. Poskrbite, da se ob kliku na katero koli celico prikaže prompt, s pomočjo katerega lahko spremenite besedilo celice. Nalogo rešite s pomočjo delegiranja (to pomeni, da mora biti dogodek dodan na table).