Делегирование в 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('!');
});