Если вы попытаетесь что-то сделать с элементами, которые динамически добавляются в DOM с помощью jQuery-метода click(), это не сработает, потому что он привязывает событие клика только к элементам, которые существуют во время привязки. Чтобы привязать событие клика ко всем существующим и будущим элементам, используйте jQuery-метод on(). Давайте посмотрим на пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Bind Click Event to Dynamically added Elements</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item <a href='javascript:void(0);' class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button>Добавить новый элемент списка</button>
<p>Нажмите кнопку выше, чтобы динамически добавлять новые элементы списка. Вы можете удалить его позже.</p>
<ol>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ol>
</body>
</html>
