-1

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

这是行动计划：

点击绿色“+”按钮以在表单末尾添加另一个与它完全相同的输入，然后该按钮将自身变为红色“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");          
});

});
4

2 回答 2

2

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

});

演示：小提琴

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

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

于 2013-08-22T02:32:08.697 回答
0

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

于 2013-08-22T02:37:12.523 回答