Question

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

请考虑以下代码：

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

当我点击＆＃34;添加参加者＆＃34;第一次，我得到了我想要的东西。但是，每次后续单击该链接会导致插入先前插入的部分的两倍。首先单击1，第二个，第三个，等等

我错过了什么吗？

提前感谢所有人。

Answer 1

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

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

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

Answer 2

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

JQuery .clone（）和.appendTo（）导致多个追加

2 个答案: