Почему обработчик событий не срабатывает на добавляемых в DOM объектах?

Question

[amritmantersingh]

Вот разметка:

<div class="destinations">
     <input type="text" class="sub-dest" value="Gonna Eat BAKSO">
     <label for=""><i class="del">-</i></label>
</div>
<button class="add-sub">
     add sub destincoden <i>+</i>
</button>

По клику на кнопку в контейнер добавляется новый input+label, Работает вот так:

$(document).ready(function(){
	$(".add-sub").click( function() {
		var input = document.createElement('input');
		input.type = 'text';
		input.classList.add('sub-dest');
		var label = document.createElement('label');
		label.innerHTML = "<i class='del'>-</i>";
		$(this).prev().append(input);
		$(this).prev().append(label);
	})
})

Далее на <i> внутри label вешаю обработчик, который должен удалять добавляемые input:

$(".del").click(function() {
		$(this).parent().prev().remove();
		$(this).parent().remove();
	})

Помогите разобраться, почему удаляются только изначально существующие HTML объекты, а на те, что были добавлены скриптом обработчик не реагирует?

Answer 1

[Дмитрий Кравченко]

потому что на новые элементы никто никаких обработчиков кликов не ставил
используйте такой синтаксис:

$(document).on('click', '.del', function(){
    $(this).parent().prev().remove();
    $(this).parent().remove();
})

тогда слушателем будет весь документ

Answer 2

[_ _]

Потому что именно это вы просите сделать jquery, вызывая .click() - найди все существующие на момент вызова элементы .del и повесь на них обработчик события click.

Вам нужен метод .live() хотя я с jquery не имел дела уже давно, может его убрали. Но вы поищите.