JQuery的.clone（）和.appendTo（）引起多追加

本文介绍了JQuery的.clone（）和.appendTo（）引起多追加的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我读过很多类似的问题和答案 - 似乎没有解决这一具体问题。所以这里去。

So I've read numerous similar questions and answers - none seem to address this specific issue. So here goes.

考虑以下code：

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

当我点击添加与会者第一次，我得到了我想要的东西。但该链路上的每个后续的点击导致两倍previous插入部分被插入。首先点击1，2秒，第三4，等等。

When I click "Add Attendee" the first time, I get what I want. But each subsequent click on that link causes double the previous inserted sections to be inserted. First click 1, second 2, third 4, etc.

我缺少的东西吗？

感谢所有提前。

推荐答案

由于 $（'。newAttendee'）。克隆（）将克隆的所有元素与该类

Because $('.newAttendee').clone() will clone all elements with that class

尝试使用第（）或最后一个（）只克隆其中之一

Try using first() or last() to only clone one of them

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

这篇关于JQuery的.clone（）和.appendTo（）引起多追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！