0

我正在尝试使用 jQuery 在表单末尾附加一个克隆的 div。以下是它的工作原理：

 var student_number = 1;
    var orig_student = $("#student-1").clone();

    $("#add-student-link").click(function() {
         ++student_number;
         orig_student.appendTo('form.reg').attr('id', 'student-' + (student_number)).addClass("additional-student");
    });

这第一次效果很好，我得到一个看起来像这样的 div：

<div id="student-2" class="additional-student"></div>

但在那之后，该 div 被另一个 id 为“student-3”的 div 替换。student-3 应该是一个新的 div，而不是替换 student-2。有任何想法吗？

4

2 回答 2

1

您只是在移动克隆而不是复制（请参阅问题下方留下的评论）。

$("#add-student-link").click(function() {
     ++student_number;
     $("#student-1").clone().attr('id', 'student-' + (student_number)).addClass("additional-student").appendTo('form.reg');
});

如果您要克隆以保持干净的副本（据我所知，可能是元素中的输入字段）然后克隆克隆。

var orig_student = $("#student-1").clone().attr('id','');
$("#add-student-link").click(function() {
     ++student_number;
     orig_student.clone().attr('id', 'student-' + (student_number)).addClass("additional-student").appendTo('form.reg');
});
于 2013-03-02T18:53:57.263 回答
0

当您第一次单击时，它会起作用，因为它使用了克隆的 div。

通过第二次单击，变量orig_student仍然引用相同的 div，您将再次附加它并更改类。

要使其工作，您需要创建另一个克隆以附加到函数中。因为这就是点击时要执行的操作。

var student_number = 1;
var orig_student = $("#student-1"); // No need to clone it here

$("#add-student-link").click(function() {
     ++student_number;
     // Create a new clone of your original div and append it
     // Like this we clone it only when really needed
     orig_student.clone().appendTo('form.reg').attr('id', 'student-' + (student_number)).addClass("additional-student");
});
于 2013-03-02T19:01:03.847 回答