Delegering i jQuery

Hvis du har studert JavaScript, har du allerede møtt emnet eventdelegering, som for eksempel kan brukes til å eliminere problemer med å legge til events for nye elementer. La oss se på hvordan dette vil se ut for jQuery.

La oss ta følgende HTML-kode:

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

CSS for den ser slik ut:

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

La oss nå, ved hjelp av metoden on, binde metoden click ikke til listepunktet li, slik vi gjorde i de foregående leksjonene, men til selve listen ul. Vi vil også sende det andre (valgfrie) parameteret 'li' som selektor for etterkommere. La oss se hva vi fikk:

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

Det er gitt en ul, den har flere li. Under ul, lag en knapp som, når den trykkes på, vil legge til en ny li på slutten av ul med teksten 'punkt'. Gjør slik at ved klikk på hver li, blir det lagt til en '!' på slutten av den. Dette skal fungere også for nylig lagde li. Løs oppgaven ved hjelp av delegering (det vil si at eventet må være festet til ul).

Det er gitt en tabell med brukere med to kolonner: fornavn og etternavn. Under tabellen, lag et skjema som kan brukes til å legge til en ny bruker i tabellen. Gjør slik at ved klikk på en hvilken som helst celle dukker det opp en prompt, som kan brukes til å endre cellens tekst. Løs oppgaven ved hjelp av delegering (det vil si at eventet må være festet til table).