# Делегирование в 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`).

←→
↑