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