Sündmuste delegeerimine jQuery-s

Kui olete JavaScripti õppinud, olete juba kokku puutunud sündmuste delegeerimise teemaga, mille abil saab näiteks vabaneda uutele elementidele sündmuste seadistamisega seotud probleemidest. Vaatame, kuidas see välja näeb jQuery-s.

Võtame järgmise HTML-koodi:

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

CSS selle jaoks näeb välja selline:

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

Nüüd seome meetodi on abil click mitte nimekirja punktile li, nagu me eelmistes õppetükkides tegime, vaid nimekirjale endale ul. Samuti edastame teise (valikulise) parameetrina 'li' järeltulijate selektorina. Vaatame, mis saadi:

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

Antud on ul, selles on mitu li. ul alla tehke nupp, mille vajutamisel ul lõppu lisatakse uus li tekstiga 'punkt'. Tehke nii, et iga li peale klõpsates lisataks selle lõppu '!'. See peab toimima ka uuesti lisatud li elementide puhul. Lahendage ülesanne delegeerimise abil (st sündmus peab olema seotud ul-ga).

Antud on tabel kasutajatega kahes veerus: eesnimi ja perenimi. Tabeli alla tehke vorm, mille abil saab tabelisse lisada uue kasutaja. Tehke nii, et mis tahes lahtrile klõpsates ilmub prompt, mille abil saab lahtri teksti muuta. Lahendage ülesanne delegeerimise abil (st sündmus peab olema seotud table-ga).