Delegálás a jQuery-ben

Ha tanultál már JavaScriptet, akkor már találkoztál a eseménydelegálás témakörével, amellyel meg lehet oldani például az új elemek eseményeinek kezelésével kapcsolatos problémákat. Nézzük meg, hogyan néz ez ki a jQuery-ben.

Vegyük a következő HTML kódot:

<ul>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>

A CSS hozzá így néz ki:

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

Most a on metódussal kössük a click eseményt nem a lista li elemeire, ahogy azt az előző leckékben tettük, hanem magára a listára, a ul-ra. Átadunk egy második (opcionális) paramétert is, 'li'-t, mint leszármazott szelektort. Nézzük meg, mi sült ki:

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

Adott egy ul, benne több li. A ul alatt helyezz el egy gombot, amelyre kattintva a ul végére egy új li kerüljön a 'pont' szöveggel. Arról gondoskodj, hogy minden egyes li-re kattintva a végére egy '!' kerüljön. Ennek az újonnan hozzáadott li elemekre is működnie kell. Old meg a feladatot delegálással (vagyis az eseményt a ul elemre kell kötni).

Adott egy táblázat felhasználókkal, két oszloppal: keresztnév és vezetéknév. A táblázat alatt készíts egy űrlapot, amellyel lehet új felhasználót hozzáadni a táblázathoz. Arról gondoskodj, hogy bármelyik cellára kattintva megjelenjen egy prompt, amellyel módosítható a cella szövege. Oldd meg a feladatot delegálással (vagyis az eseményt a table elemre kell kötni).