Javascript 动态添加和删除表单字段代码工作不正常

我正在编写一个动态添加和删除表单恶魔的解决方案

这是行动计划：

点击绿色的“+”按钮添加另一个与表单末尾完全相同的输入，然后该按钮将自身更改为红色的“x”按钮

点击红色的“x”按钮，它将完全删除点击/触摸的输入

当我按下第一个绿色按钮时，好的。它正是我想要的。第一个红色的也一样。当我试图删除或添加多个按钮时，混乱就开始了，因为页面加载时唯一有效的按钮是2

我还认为，由于将来的后端数据库记录，我必须执行一个函数，为每个输入添加一个新的唯一类。但我也不知道怎么做

这是一把小提琴：

$（文档）.ready（函数（）{
var newField=''
$（文档）.on（“触摸端鼠标”和“.button add”，函数（e）{
e、 stopPropagation（）；e.preventDefault（）；
$（this.removeClass（“按钮添加”）.addClass（“按钮取消”）；
$（“.field”）.removeAttr（“禁用”）；
$（newField）.hide（）.appendTo（“form”）.fadeIn（500）；
});
$（document）.on（“touchend mouseup”，“.button cancel”，function（））{
$（this）.最近（“.field wrapper”）.fadeOut（“fast”）；
});
});

jQuery动态元素101。。。。使用事件委派处理事件

$(document).ready(function(){
    var newField = '<div class="field-wrapper"><input type="text" class="field" disabled="disabled" /><div class="button-holder"><div class="button-add"><img src="http://www.ricardostrobel.com.br/add-cancel-color.svg"></div></div></div>'

    $(document).on("touchend mouseup",".button-add",function(e){
        e.stopPropagation(); e.preventDefault();
        $(this).removeClass("button-add").addClass("button-cancel");
        $(".field").removeAttr("disabled");

        $(newField).hide().appendTo("form").fadeIn(500);

    });

    $(document).on("touchend mouseup",".button-cancel", function(){
        $(this).closest(".field-wrapper").fadeOut("fast");          
    });

});

$（文档）.ready（函数（）{
var newField=''
$（文档）.on（“触摸端鼠标”和“.button add”，函数（e）{
e、 stopPropagation（）；e.preventDefault（）；
$（this.removeClass（“按钮添加”）.addClass（“按钮取消”）；
$（“.field”）.removeAttr（“禁用”）；
$（newField）.hide（）.appendTo（“form”）.fadeIn（500）；
});
$（document）.on（“touchend mouseup”，“.button cancel”，function（））{
$（this）.最近（“.field wrapper”）.fadeOut（“fast”）；
});
});

演示：

当您使用普通事件注册模型时，它会将处理程序直接注册到在处理程序注册执行时dom中存在的目标。因此，稍后动态添加的元素将不会获得这些处理程序

---

解决方案是使用事件委派，在这个模型中，处理程序注册到一个祖先元素，当页面加载选择器以过滤掉源元素时，该祖先元素将出现。这利用了事件传播——在一个元素中发生的事件被传播到所有的祖先元素（很少有像焦点事件这样的异常）。因此，在元素中发生的事件将传播到其中一个元素中的祖先元素。将注册处理程序，然后将事件源元素（event.target）及其祖先与作为第二个参数传递的选择器进行匹配，如果满足，则执行处理程序。

在创建或删除新元素后，需要重新注册事件处理程序。另一种方法是为父div注册一个事件处理程序，并检查单击了哪个子元素（.button add或.button cancel），然后将您的逻辑应用于单击的元素。

“我认为这是不言自明的，正如您在这把小提琴中看到的：“这不好。你的问题需要是独立的，并且不需要打开任何外部链接就可以回答。你的问题的有意义的内容需要在问题中。可能重复@meagar好的，我编辑了我的问题，很抱歉，如果你能回到你的决定中，那就太好了：）很有效，谢谢！你能给我解释一下你的解决办法吗？我从未见过您在按钮上编写的代码结构。@Strobel这里有一个很好的解释：@Strobel还可以查看jQuery API文档中的

。on（）

-直接和委派事件部分介绍了此主题。

$(document).ready(function(){
    var newField = '<div class="field-wrapper"><input type="text" class="field" disabled="disabled" /><div class="button-holder"><div class="button-add"><img src="http://www.ricardostrobel.com.br/add-cancel-color.svg"></div></div></div>'

    $(document).on("touchend mouseup",".button-add",function(e){
        e.stopPropagation(); e.preventDefault();
        $(this).removeClass("button-add").addClass("button-cancel");
        $(".field").removeAttr("disabled");

        $(newField).hide().appendTo("form").fadeIn(500);

    });

    $(document).on("touchend mouseup",".button-cancel", function(){
        $(this).closest(".field-wrapper").fadeOut("fast");          
    });

});