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:

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

A CSS hozzá így néz ki:

cssli {
  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:

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

Задание 1

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).

Задание 2

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).