单击时克隆表单元素会复制数据

时间:2013-10-17 16:17:03

标签: jquery

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

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

2 个答案:

答案 0 :(得分:2)

您在每次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);
});

DEMO: http://jsfiddle.net/MJrUF/2/

答案 1 :(得分:0)

为什么不尝试使用不同的方法,例如:

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