Делегиране в jQuery

Ако сте изучавали JavaScript, тогава вече сте се сблъсквали с темата делегиране на събития, с помощта на което може, например, да се отървете от проблеми при поставяне на събития за нови елементи. Нека да видим как ще изглежда това в jQuery.

Нека вземем следния HTML код:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</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).