jQuery克隆问题（克隆表单输入集）

Question

我正在创建一个测验创建表单，需要克隆表单的各个部分。

see jsFiddle code example here

我的麻烦来了一组新的问题域的加入。当我点击“添加其他问题”按钮时，它会复制多个答案字段（如果第一个答案有多个答案字段），并且克隆的“添加另一答案”按钮不起作用。

任何与此有关的帮助将不胜感激！

谢谢。

Answer 1

我推荐几件事情：

当它是空的，您可以创建HTML的副本 - 这样你保存自己不得不与克隆值的东西已经在和需要清除它们。只需克隆已有的空白文件即可。

您还对问题设置了live，但它是您希望使用live的“添加答案”按钮。 Live会为处理程序添加任何添加到DOM的内容（您正在执行的操作）。这是每个“添加答案”按钮的原因，除了第一个不起作用。

var emptyQ = $("li.question").clone(), 
    emptyA = $("li.answer").clone(); 


$("#addQuestion").live('click', function(e) { 
    e.preventDefault(); 
    $('#questioncontainer').append(emptyQ.clone()); 

}); 

$(".addAnswer").live('click', function(e) { 
    e.preventDefault(); 
    $(this).parent().find(".answerContainer").append(emptyA.clone()); 
}); 

工作例如：http://jsfiddle.net/jonathon/Sd9Ag/

我用$(this).parent()以获取被点击的按钮的问题/答案容器。这意味着相同的处理程序适用于所有人。

最后 - 我不知道它是否有所作为，但我使用e.preventDefault()而不是return false上的点击处理程序。我不知道 - 我只是觉得它更优雅。

Answer 2

您还需要.clone(true)以克隆其处理程序。

你可能会想为你的add another answer处理程序做这样的事情。

$('.answer:last').clone().appendTo($(this).prev().find('.answerContainer')).find("input").val("");  

否则它会附加到所有答案容器。