Delegarea în jQuery

Dacă ați studiat JavaScript, atunci ați întâlnit deja subiectul delegării evenimentelor, cu ajutorul căruia se poate, de exemplu, scăpa de problemele legate de atașarea evenimentelor pentru elementele noi. Să vedem cum va arăta acest lucru în jQuery.

Să luăm următorul cod HTML:

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

CSS pentru el arată astfel:

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

Să acum, cu ajutorul metodei on, atasăm metoda click nu la elementul de listă li, așa cum am făcut în lecțiile anterioare, ci la lista însăși ul. De asemenea, vom transmite ca al doilea parametru (opțional) 'li' în calitate de selector pentru descendenți. Să vedem ce am obținut:

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

Este dat ul, în el sunt mai multe li. Sub ul faceți un buton, la apăsarea căruia în sfârșitul ul va fi adăugat un nou li cu textul 'punct'. Faceți astfel încât la click pe fiecare li, la sfârșitul lui să se adauge '!'. Acest lucru trebuie să funcționeze și pentru li adăugați ulterior. Rezolvați problema cu ajutorul delegării (adică evenimentul trebuie să fie atașat la ul).

Este dat un tabel cu utilizatori cu două coloane: nume și prenume. Sub tabel faceți un formular, cu ajutorul căruia se va putea adăuga un nou utilizator în tabel. Faceți astfel încât la click pe orice celulă să apară un prompt, cu ajutorul căruia se poate modifica textul celulei. Rezolvați problema cu ajutorul delegării (adică evenimentul trebuie să fie atașat la table).