Делегирање у jQuery-у

Ако сте учили JavaScript, онда сте већ срели тему делегирања догађаја, помоћу којег се, на пример, могу решити проблеми при додавању догађаја за нове елементе. Погледајмо како то изгледа у jQuery-у.

Узмимо следећи HTML кôд:

<ul>
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
</ul>

CSS за њега изгледа овако:

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

Хајде сада, помоћу методе on, да вежемо метод click не на ставку листе li, као што смо радили у претходним лекцијама, већ на саму листу ul. Такође ћемо проследити другим (опционим) параметром 'li' као селектор потомака. Погледајмо шта смо добили:

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

Дат је ul, у њему неколико li. Испод ul направите дугме, при клику на које ће се на крај ul додавати нова li са текстом 'ставка'. Направите тако да при клику на сваку li, њој се на крај додаје '!'. Ово мора да ради и за ново додате li. Задатак решите помоћу делегирања (то јест догађај мора да буде везан на ul).

Дата је табела са корисницима са две колоне: име и презиме. Испод табеле направите форму, помоћу које ће се моћи додати нови корисник у табелу. Направите тако да при клику на било коју ћелију појави prompt, помоћу кога се може изменити текст ћелије. Задатак решите помоћу делегирања (то јест догађај мора да буде везан на table).