JQuery .clone() 和 .appendTo() 导致多次追加

Question

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

考虑以下代码：

<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>

当我第一次点击 "Add Attendee" 时，我得到了我想要的。但随后每次单击 link 都会导致插入先前插入的部分的两倍。第一次点击1，第二次点击2，第三次点击4等

我是不是漏掉了什么？

在此先感谢大家。

Answer 1

因为 $('.newAttendee').clone() 将克隆所有具有 class

的元素

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

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

Answer 2

这是因为 $('.newAttendee') select 所有元素都带有 class 新参加者。在你克隆它之后你有 2 等等。克隆后更改 class 可以避免这种情况。

JQuery .clone() 和 .appendTo() 导致多次追加

JQuery .clone() and .appendTo() causing multiple appends

javascript

jquery

clone

appendto