Įvykių delegavimas jQuery

Jei jūs mokėtės JavaScript, tai jau susidūrėte su įvykių delegavimo tema, kurios pagalba galima, pavyzdžiui, atsikratyti problemų pririšant įvykius naujiems elementams. Pažiūrėkime, kaip tai atrodo jQuery.

Paimkime šį HTML kodą:

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

CSS jam atrodo taip:

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

Dabar, naudodami metodą on, pririšime metodą click ne prie sąrašo punkto li, kaip darėme ankstesnėse pamokose, o prie paties sąrašo ul. Taip pat perduosime antru (neprivalomu) parametru 'li' kaip palikuonių selektorių. Pažiūrėkime, kas gavosi:

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

Задание 1

Duotas ul, jame yra keli li. Po ul padarykite mygtuką, kurį paspaudus į ul galą bus pridedamas naujas li su tekstu 'punktas'. Padarykite taip, kad paspaudus ant kiekvieno li, į jo galą būtų pridedamas '!'. Tai turi veikti ir naujai pridėtiems li. Užduotį išspręskite naudodami delegavimą (t.y. įvykis turi būti pririštas prie ul).

Задание 2

Duota lentelė su vartotojais su dviem stulpeliais: vardas ir pavardė. Po lentele padarykite formą, kurios pagalba galima bus pridėti naują vartotoją į lentelę. Padarykite taip, kad paspaudus ant bet kurios langelės atsirastų prompt, kurio pagalba galima pakeisti langelio tekstą. Užduotį išspręskite naudojant delegavimą (t.y. įvykis turi būti pririštas prie table).