Delegering i jQuery

Om du har studerat JavaScript, har du redan stött på ämnet händelsedelegering, med vilket du till exempel kan bli av med problem med att lägga till händelser för nya element. Låt oss se hur det kommer att se ut för jQuery.

Låt oss ta följande HTML-kod:

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

CSS för den ser ut så här:

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

Låt oss nu, med hjälp av metoden on, binda metoden click inte till listpunkten li, som vi gjorde i tidigare lektioner, utan till själva listan ul. Vi kommer också att skicka den andra (valfria) parametern 'li' som selektor för avkomlingar. Låt oss se vad som hände:

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

Det finns en ul, i den finns flera li. Under ul, gör en knapp, vid klick på vilken i slutet av ul kommer en ny li att läggas till med texten 'punkt'. Se till att vid klick på varje li, läggs ett '!' till i slutet av den. Detta ska fungera även för nyligen tillagda li. Lös uppgiften med hjälp av delegering (det vill säga händelsen måste vara kopplad på ul).

Det finns en tabell med användare med två kolumner: förnamn och efternamn. Under tabellen, gör ett formulär med vilket det kommer att vara möjligt att lägga till en ny användare i tabellen. Se till att vid klick på vilken cell som helst visas en prompt, med vilken du kan ändra celltexten. Lös uppgiften med hjälp av delegering (det vill säga händelsen måste vara kopplad på table).