Delegointi jQueryssä

Jos olet opiskellut JavaScriptiä, olet jo kohdannut aiheen tapahtumien delegointi, jonka avulla voidaan esimerkiksi päästä eroon ongelmista, kun liitetään tapahtumia uusille elementeille. Katsotaan, milta se näyttää jQueryllä.

Otetaan seuraava HTML-koodi:

<ul>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
</ul>

CSS siihen näyttää tältä:

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

Liitetään nyt, on-metodin avulla, click-metodi ei listan kohtaan li, kuten teimme edellisissä oppitunneissa, vaan itse listaan ul. Lisäksi välitämme toisen (valinnaisen) parametrin 'li' jälkeläisten valitsimena. Katsotaan, mitä saimme:

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

Annettu ul, siinä on useita li-elementtejä. ul-elementin alle tee painike, jota painamalla ul:n loppuun lisätään uusi li tekstillä 'kohta'. Tee niin, että kun klikataan mitä tahansa li-elementtiä, sen loppuun lisätään '!'. Tämän pitäisi toimia myös vasta lisätyille li-elementeille. Ratkaise tehtävä käyttämällä delegointia (eli tapahtuman pitää olla liitetty ul-elementtiin).

Annettu taulukko käyttäjistä, jossa on kaksi saraketta: etunimi ja sukunimi. Taulukon alle tee lomake, jonka avulla voidaan lisätä uusi käyttäjä taulukkoon. Tee niin, että kun klikataan mitä tahansa solua, ilmestyy prompt, jonka avulla solun tekstiä voidaan muuttaa. Ratkaise tehtävä käyttämällä delegointia (eli tapahtuman pitää olla liitetty table-elementtiin).