Question

我正在尝试使用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。学生-3应该是一个新的div，而不是替换学生-2。有什么想法吗？

Answer 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');
});

Answer 2

当您第一次单击时，它会起作用，因为它使用克隆的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");
});

jQuery appendTo仅适用于第一次，然后替换

2 个答案: