Delegering i jQuery

Hvis du har studeret JavaScript, har du allerede stødt på emnet eventdelegering, som f.eks. kan bruges til at undgå problemer med at tilknytte events til nye elementer. Lad os se på, hvordan det vil se ud i jQuery.

Lad os tage følgende HTML-kode:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

CSS for det ser sådan ud:

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

Lad os nu, ved hjælp af metoden on, binde metoden click ikke til listepunktet li, som vi gjorde i de foregående lektioner, men til selve listen ul. Vi vil også sende en anden (valgfri) parameter 'li' som afstamningsselektor. Lad os se, hvad vi fik:

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

Der er givet en ul, i den er der flere li. Under ul lav en knap, ved klik på hvilken der tilføjes en ny li til enden af ul med teksten 'punkt'. Sørg for at ved klik på hver li tilføjes der en '!' til dens ende. Dette skal også virke for nyttilføjede li. Løs opgaven ved hjælp af delegering (det vil sige eventet skal være sat på ul).

Der er givet en tabel med brugere med to kolonner: fornavn og efternavn. Under tabellen lav en formular, ved hjælp af hvilken det vil være muligt at tilføje en ny bruger til tabellen. Sørg for, at ved klik på enhver celle vises en prompt, ved hjælp af hvilken det er muligt at ændre celleteksten. Løs opgaven ved hjælp af delegering (det vil sige eventet skal være sat på table).