Question

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

这是行动计划：

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

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

当我点击第一个绿色按钮时，好的。它完全符合我的要求。同样是第一个红色的。当我尝试删除或添加多个时，混乱开始，导致页面加载时唯一有效的按钮是2。

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

这是一个小提琴：http://fiddle.jshell.net/Ja9yE/2/

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

});

Answer 1

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

});

演示：Fiddle

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

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

Answer 2

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

动态添加和删除表单域代码无法正常工作

2 个答案: