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();
     }
   });
 });

我现在正在尝试做其他事情。如果添加新行，新输入还应该有一个复选框，可以添加新输入。所以我不再想将其限制为只添加一个输入。但是，如果未选中输入的复选框，则应删除其相关输入。

这样的事情可能吗？

谢谢

Answer 1

是的，有可能。

这是一个工作 fiddle:

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

注意事项：

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

委托函数在这种情况下非常有用。它的作用它需要一个元素，并将事件处理程序应用于与委托函数中指定的选择器匹配的任何元素，即使它是在代码已经运行.

之后添加的

UI 非常简单，因此我能够使用 next 和 previous 定位元素。如果它变得更复杂，您可能需要添加一个属性或 class 以更轻松地识别相应的输入。

JQuery，多次克隆 div

JQuery, cloning a div more than once

javascript

jquery

clone