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>
Alex
05.10.2017Спасибо!
Max
04.12.2017Благодарю, очень пригодилось)
Qood
17.02.2022А если не использовать jquery
Михуил
28.12.2017Наверное прикольно быть умным) На самом деле коммент ради бесплатной ссылки на мой блог)
Alexander
02.02.2018Спасибо, пригодилось
Dmitriy
28.10.2018А тормозить не будет?
Алексей
08.12.2019Огромное спасибо!
Виктор
24.07.2020Спасибо!
Отличный пример, пригодилось!
Санек
08.02.2021код нельзя в нормальном читабельном виде написать?
moxiemaks
28.02.2021Да без проблем. Кидай пример, посмотрим, может быть сделаем, чтоб тебе понравилось.
Евгений
21.04.2021Спасибо!
Vitaliy
07.08.2021Сколько будет стоить установка LazyLoad на мой сайт?
Artem
10.03.2022А как сделать то же самое только не для события click а для hover?