JQuery, клонирование div более одного раза

Question

У меня есть следующее JSFiddle настроено. На данный момент у меня есть три div, каждый со своим входом. Каждый вход имеет флажок, в который можно добавить другой вход. Если флажок снят, вход снова удаляется. Код для этого

$(function() { 
    $('input:checkbox[name="labelNewline"]').change(function() { 
    if ($(this).is(':checked')){ 
     var clone = $(this).parent().siblings(".labelAndInput").first().clone().insertAfter($(this).parent()); 
     clone.addClass('clone'); 
    } else { 
      $(this).parent().siblings(".clone").remove(); 
    } 
    }); 
}); 

Я пытаюсь сделать что-то еще. Если новая строка добавлена, новый ввод также должен иметь флажок с возможностью добавления нового ввода. Поэтому я больше не хочу ограничивать это добавлением только одного добавляемого. Однако, если флажок для ввода не установлен, он должен удалить свой соответствующий вход.

Возможно ли подобное?

Thanks

Answer 1

Да, это возможно.

Вот рабочая скрипку:

https://jsfiddle.net/yvnyk69v/1/

Вещи Примечание:

$("#testingContainer").delegate('input:checkbox[name="labelNewline"]', 'change', function() { 

функция Делегат действительно полезно в этом случае. Для чего он принимает элемент и будет применять обработчик событий к любому элементу, который соответствует селектору, указанному в функции делегата, даже если он добавлен после того, как код уже запущен.

Пользовательский интерфейс был довольно прост, поэтому я смог настроить таргетинг на элементы следующего и предыдущего. Если он становится более сложным, вы можете добавить атрибут или класс, чтобы легче идентифицировать соответствующие входы.