Delegering in jQuery

As jy JavaScript bestudeer het, het jy al teëgekom op die onderwerp gebeurte-delegering, waarmee jy byvoorbeeld probleme kan uitskakel wanneer jy gebeurtenisse aan nuwe elemente koppel. Kom ons kyk hoe dit in jQuery sal lyk.

Neem die volgende HTML-kode:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

CSS daarvoor lyk so:

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

Laat ons nou, met behulp van die metode on, die metode click koppel nie aan die lyspunt li nie, soos ons in vorige lesse gedoen het, maar aan die lys self ul. Ons sal ook die tweede (opsionele) parameter 'li' oordra as 'n selektor vir afstammelinge. Kom ons sien wat ons kry:

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

Daar is 'n ul, met verskeie li daarin. Maak 'n knoppie onder die ul, sodat wanneer daarop gedruk word, 'n nuwe li met die teks 'item' bygevoeg word aan die einde van die ul. Maak dit so dat met 'n klik op elke li, 'n '!' by die einde daarvan gevoeg word. Dit moet werk vir nuutbygevoegde li ook. Los die taak op met behulp van delegering (dit wil sê, die gebeurtenis moet aan die ul gekoppel wees).

Daar is 'n tabel met gebruikers met twee kolomme: naam en van. Maak 'n vorm onder die tabel, waarmee 'n nuwe gebruiker bygevoeg kan word tot die tabel. Maak dit so dat met 'n klik op enige sel, 'n prompt verskyn, waarmee jy die selteks kan verander. Los die taak op met behulp van delegering (dit wil sê, die gebeurtenis moet aan die table gekoppel wees).