События для динамически добавленных элементов в jQuery

jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы — при помощи ajax’а или функций типа append() — то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

Оказывается для динамических элементов используется делегированная обработка событий.

Если кратко, то смысл делегирования в том, что обработчики «навешиваются» не на отсутствующие в dom элементы, а на существующий родительский объект.

Таким образом, при срабатывании соответствующего события (в моем примере это будет body), будет вызван данный обработчик для всех элементов, соответствующих селектору, даже если этих элементов не было во время объявлении обработчика (например при загрузке страницы).

Вот пример и код к нему

добавить

<style>
.example
{
display:block;
width: 200px;
}
.example li
{
margin: 4px;
}
</style>
<script>
$(document).ready(function () {
$("body").on("click", ".remove-button", function () {
      $(this).parent().remove();
    });

$("body").on("click", ".create-button", function () {
      var countPlayers = $('.example li').length;
      var player = '<li>Игрок ' + (countPlayers+1)  + 
      ' <a href="javascript: return false;" class="remove-button right">Удалить</a></li>';
      $('.example').append(player);
    });
});
</script>
<ul class="example">
<li>Игрок 1 <a href="javascript: return false;" class="remove-button right">Удалить</a></li>
<li>Игрок 2 <a href="javascript: return false;" class="remove-button right">Удалить</a></li>
<li>Игрок 3 <a href="javascript: return false;" class="remove-button right">Удалить</a></li>
<li>Игрок 4 <a href="javascript: return false;" class="remove-button right">Удалить</a></li>
</ul>
<a href="javascript: return false;" class="create-button">добавить</a>

5 комментариев

  • Alex

    05.10.2017

    Спасибо!

    Reply
  • Max

    04.12.2017

    Благодарю, очень пригодилось)

    Reply
  • Михуил

    28.12.2017

    Наверное прикольно быть умным) На самом деле коммент ради бесплатной ссылки на мой блог)

    Reply
  • Alexander

    02.02.2018

    Спасибо, пригодилось

    Reply
  • Dmitriy

    28.10.2018

    А тормозить не будет?

    Reply

Добавить комментарий