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

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

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

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

CSS за него изглежда така:

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

Нека сега, с помощта на метода on, свържем метода click не към елемента от списъка li, както правехме в предишните уроци, а към самия списък ul. Също така ще предадем втори (незадължителен) параметър 'li' като селектор за потомци. Нека видим какво се получи:

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

Задание 1

Даден е ul, в него има няколко li. Под ul направете бутон, при натискане на който в края на ul ще се добавя нов li с текст 'пункт'. Направете така, че при кликване върху всеки li, в края му да се добавя '!'. Това трябва да работи и за ново добавени li. Решете задачата с помощта на делегиране (тоест събитието трябва да бъде поставено на ul).

Задание 2

Дадена е таблица с потребители с две колони: име и фамилия. Под таблицата направете форма, с помощта на която може да се добави нов потребител в таблицата. Направете така, че при кликване върху която и да е клетка да се появява prompt, с помощта на който може да се промени текста в клетката. Решете задачата с помощта на делегиране (тоест събитието трябва да бъде поставено на table).