Delegēšana jQuery

Ja esi mācījies JavaScript, tad jau esi saskāries ar tēmu notikumu delegēšanu, ar kuras palīdzību var, piemēram, atbrīvoties no problēmām, pievienojot notikumus jauniem elementiem. Apskatīsim, kā tas izskatīsies jQuery.

Paņemsim šādu HTML kodu:

<ul>
	<li>teksts</li>
	<li>teksts</li>
	<li>teksts</li>
</ul>

CSS tam izskatās šādi:

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

Tagad, izmantojot metodi on, piesienam metodi click ne pie saraksta punkta li, kā mēs darījām iepriekšējās nodarbībās, bet pie visa saraksta ul. Arī mēs nodosim otro (neobligāto) parametru 'li' kā apakšelementu selektoru. Apskatīsim, ko ieguvām:

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

Dots ul, tajā vairāki li. Zem ul izveidojiet pogu, nospiežot uz kuras ul beigās tiks pievienots jauns li ar tekstu 'punkts'. Izdariet tā, lai uzklikšķinot uz katru li, tam beigās tiktu pievienots '!'. Tam jāstrādā arī jauniem pievienotajiem li. Uzdevumu atrisiniet ar delegēšanas palīdzību (tas ir, notikumam jābūt piestiprinātam pie ul).

Dota lietotāju tabula ar divām kolonnām: vārds un uzvārds. Zem tabulas izveidojiet formu, ar kuras palīdzību varēs pievienot jaunu lietotāju tabulā. Izdariet tā, lai uzklikšķinot uz jebkuras šūnas, parādītos prompt, ar kura palīdzību varētu mainīt šūnas tekstu. Uzdevumu atrisiniet ar delegēšanas palīdzību (tas ir, notikumam jābūt piestiprinātam pie table).