JQuery .clone(） 和 .appendTo(） 导致多个附加

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

本文关键字：appendTo clone JQuery      更新时间：2023-09-26

所以我读过许多类似的问题和答案 - 似乎没有一个解决这个特定问题。 所以在这里。

请考虑以下代码：

<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，依此类推。

我错过了什么吗？

提前感谢大家。

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

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

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

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

相关文章：