Question

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

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

非常感谢任何帮助！

感谢。

Answer 1

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

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

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

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

Answer 2

我推荐了几件事：

当HTML空白时，您可以创建HTML的副本 - 这样您就可以节省自己必须克隆已经存在的值并需要清除它们的内容。只需克隆你已经拥有的那个空白。

您还在问题上设置了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。我不知道 - 我觉得它更优雅。

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

2 个答案: