Есть скрипт Код (Text): <script type="text/javascript"> $(document).ready(function(){ $("#add").click(function(){ var newElems = $('<div></div>') .append('Новый блок') .append('<a class="del" href="#">Удалить</a>'); $('#wrap').append(newElems); return false }); $(".del").click(function(){ var pdiv = $(this).parent('div'); pdiv.fadeOut(100); return false }); }); </script> <div id="wrap"> <div>Блок 1<a class="del" href=\"#\">Удалить</a></div> <div>Блок 2<a class="del" href=\"#\">Удалить</a></div> </div> <a id="add" href="#">Добавить</a></div> Когда добавляем новый блок, в нем не работает кнопка удалить. Как можно исправить эту ошибку?
click работатет только на элементы которые были в dom при загрузке что бы работать с элементами которые были добавлены динамически используй такую конструкцию Код (Javascript): $('body').on('click', '.del', function(){ })
Спасибо, работает, есть отличие по нагрузке Код (Text): $('body').on('click', '.del', function(){ и Код (Text): $(".del").click(function(){ ? Если я буду чаще использовать Ваш вариант, будет ли разница в поведении сайта?
Да. Так как мы взаимодействуем с глобальным DOM и с его изменяемыми структурами. ( тобишь каждый раз пробегается по документу своим парсером или как там его называют) Либо мы работаем со статическим DOM, где добавленный скриптом новый хтмл код не будет виден --- Добавлено ---
А можно по идеи еще всплытием реализовать. В том плане что обработчик поставить на родительский div https://learn.javascript.ru/event-bubbling