JQuery .clone() 和 .appendTo() 导致多个追加答案

【问题标题】：JQuery .clone() and .appendTo() causing multiple appendsJQuery .clone() 和 .appendTo() 导致多个追加
【发布时间】：2016-07-06 08:33:58
【问题描述】：

所以我已经阅读了许多类似的问题和答案 - 似乎没有一个可以解决这个特定问题。就这样吧。

考虑以下代码：

<body>
<script>

    function addAttendee() {
        $('.newAttendee').clone().appendTo('.attendees');
    }

</script>

<form action="test2.php" name="testform" method="post">
    <span class="attendees">
    <input type="text" name="attendee[0][city]" value="city 1">
    <input type="text" name="attendee[0][state]" value="state 1">
    <input type="text" name="attendee[0][zip]" value="zip 1">
    </span>
<a href="#" name="addAttendee" onclick="addAttendee()">Add Attendee</a>
<br>
<input type="submit" onclick="getOutput()">
</form>

<div class="hideThis" style="display: none;">
    <span class="newAttendee">
        <br>
    <input type="text" name="attendee[1][city]" value="city 2">
    <input type="text" name="attendee[1][state]" value="state 2">
    <input type="text" name="attendee[1][zip]" value="zip 2">
    </span>
</div>

当我第一次点击“添加与会者”时，我得到了我想要的。但是随后每次单击该链接都会导致插入先前插入的部分的两倍。第一次点击1，第二次点击2，第三次点击4，以此类推

我错过了什么吗？

在此先感谢大家。

【问题讨论】：

标签： javascript jquery clone appendto

【解决方案1】：

这是因为$('.newAttendee') 选择了所有类 newAttendee 的元素。在你克隆它之后，你有 2 个，依此类推。克隆后更改类可以避免这种情况。

【讨论】：

【解决方案2】：

因为$('.newAttendee').clone() 将克隆该类的所有元素

尝试使用first() 或last() 仅克隆其中一个

$('.newAttendee').first().clone().appendTo('.attendees');

【讨论】：

你最好使用 $('.newAttendee').clone()..removeClass('newAttendee').appendTo('.attendees');
@SideriteZackwehdex 但这可能会对 css 或其他代码产生影响。只克隆其中一个非常简单
我认为代码的目的不是为 newAttendee 类添加跨度，而只是将其用作模板。如果没有，那么你是对的。
@SideriteZackwehdex 任何一种方式都只能克隆一个。还可以在页面加载时存储一个克隆。
@charlietfl 宾果游戏。做到了。说得通。我有一种（错误的）印象，即克隆只复制了一次现有部分。我现在明白我错在哪里了。谢谢大家。