Delegatie in jQuery

Als je JavaScript hebt bestudeerd, ben je al de onderwerp gebeurtenisdelegatie tegengekomen, waarmee je bijvoorbeeld problemen kunt oplossen bij het toekennen van gebeurtenissen voor nieuwe elementen. Laten we eens kijken, hoe dit eruit zal zien voor jQuery.

Laten we de volgende HTML-code nemen:

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

CSS daarvoor ziet er als volgt uit:

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

Laten we nu, met behulp van de methode on, de methode click niet binden aan het lijstpunt li, zoals we in eerdere lessen deden, maar aan de lijst zelf ul. We geven ook een tweede (optionele) parameter 'li' door als selector voor afstammelingen. Laten we kijken wat we hebben gekregen:

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

Gegeven een ul, daarin staan meerdere li. Onder de ul maak je een knop, waarop bij het indrukken aan het einde van de ul een nieuwe li wordt toegevoegd met de tekst 'punt'. Zorg ervoor dat bij een klik op elke li, aan het einde daarvan een '!' wordt toegevoegd. Dit moet ook werken voor nieuw toegevoegde li. Los de taak op met behulp van delegatie (dat wil zeggen, de gebeurtenis moet worden toegekend aan de ul).

Gegeven een tabel met gebruikers met twee kolommen: voornaam en achternaam. Onder de tabel maak je een formulier, waarmee een nieuwe gebruiker aan de tabel kan worden toegevoegd. Zorg ervoor dat bij een klik op een willekeurige cel een prompt verschijnt, waarmee de tekst van de cel kan worden gewijzigd. Los de taak op met behulp van delegatie (dat wil zeggen, de gebeurtenis moet worden toegekend aan de table).