これまで多くの同様の質問と回答を読んだことがあります。だからここに行く。JQueryの.clone()と.appendTo()は、複数の追加を引き起こします。
は、次のコードを考えてみましょう:
<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>
私が初めて「出席者を追加」をクリックすると、私は私が欲しいものを手に入れます。しかし、そのリンクを次々にクリックすると、前に挿入されたセクションが2倍挿入されます。最初のクリック1、2番目の2、3番目の4など
私に何かが不足していますか?
ありがとうございます。
$( '。newAttendee')を使用すると、より良い結果が得られます。clone().. removeClass( 'newAttendee')。appendTo( '。attendees'); –
@SideriteZackwehdexそれはCSSやその他のコードに影響する可能性があります。 – charlietfl
私は、コードの意図はnewAttendeeクラスでスパンを追加するのではなく、テンプレートとしてのみ使用することだと思います。もしそうでなければ、そうです。 –