jquery - 单击时克隆表单元素正在复制数据

Question

我正在尝试通过单击锚标记来复制带有字段的表单。它行为不正确的原因是因为 jQuery click 事件被绑定在一个$('body').on('click')事件内部（顺便说一句，对于我必须工作的其他代码，它必须在那里。另外奇怪的是，如果你在其中输入一个值文本字段之一并单击“克隆”它会产生随机数量的额外元素。任何有关正在发生的事情的线索将不胜感激。

可以在此处找到问题示例：http: //jsfiddle.net/MJrUF/1/

Answer 1

您正在将附加单击处理程序绑定到add-btn每次body单击时的现有处理程序。可能您需要像下面这样使用委托的东西，因此不必担心带有克隆功能的新按钮。

$('body').on('click', '.add-btn', function (e) {
    // Other necessary code unrelated to this form is here

    e.preventDefault();
    var $wrapper = $(this).closest('.form-wrapper');
    var data = $wrapper.clone(true);
    $wrapper.after(data);
});

演示：http: //jsfiddle.net/MJrUF/2/

Answer 2

为什么不尝试不同的方法，例如：

http://jsfiddle.net/ZrW3h/

    $("button.clone").live("click", function(){
        $(this).parents(".clonedInput").clone()
            .appendTo("body")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
    });