Почему не работают кнопки?

Question

[Игорь]

Есть элементы списка, в каждом по две кнопки: Удалить(удаляет текущий li) и Выполнено(Просто перечеркивает строку). Если создать новый li через jquery с такими же кнопками и классами к ним, то в новых li кнопки не работают, хотя событие весит на классе, который есть и у новых и у старых li.
$(".deleteBtn").click(function() {
$(this).parents("li").remove();
});

Answer 1

[justdealman]

$(document).on('click', '.deleteBtn', function() {
	$(this).parents('li').remove();
});

Comments

[Игорь]

Спасибо, заработало. Но в чем разница? Почему так работает, а так нет?

[justdealman]

Делегирование событий. Обработчик вешается при первоначальной загрузке сайта, на тот момент элемент отсутствует в DOM дереве. Смысл делегирования — навесить обработчик на родительский объект, который существует при загрузке страницы (не обязательно 'document'), при вызове обработчик будет искать внутри родительского элемента соответствующий селектор согласно текущему DOM дереву.

[Игорь]

justdealman: Хорошо объяснил. Спасибо большое!!)