Почему несколько блоков не работают после клонирования?

Question

Приносим извинения, если вопрос сформулирован неаккуратно. Я просто где-то в начале понимания jquery.

Я хочу реализовать построитель форм на основе перетаскивания.

Я добавил кнопку, чтобы клонировать ушедший элемент. Но после того, как кнопки клонирования «remove» и «clone» не работают.

jsfiddle.net/284mx1vn/

Спасибо за вашу помощь!

Answer 1

Я просто отрегулировать ваш Fiddle

Я добавил две строки

$(document).on("click", ".remove", function(){ 
    $(this).closest(".input-block").remove();}); 
$(document).on("click", ".add", function(){ 
    $(this).closest(".input-block").clone().appendTo("#drop-space"); 
}); 

так это работает для динамически создаваемых элементов, и добавил класс «добавить» к «добавить» - для удобства.
Проблема заключалась в том, что события должны быть связаны с элементами, уже существующими в DOM при загрузке документа. В качестве решения можно использовать делегирование делегирования - это значит делегировать событие (в данном случае событие click для кнопок) из статического родительского элемента, например. $(document). Этот родительский элемент делегирует событие всем дочерним элементам класса, используя функцию jquery on(), даже если эти элементы будут добавлены позже.
Для справки: http://api.jquery.com/on/ и https://api.jquery.com/on/#on-events-selector-data-handler, раздел «Прямые и делегированные события»:

«обработчики событий привязанные только к выбранным в данный момент элементов, они должны существовать на странице в то время, что ваш код делает вызов .на()."