2016-03-19 5 views
1

これまで多くの同様の質問と回答を読んだことがあります。だからここに行く。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など

私に何かが不足していますか?

ありがとうございます。

答えて

4

$('.newAttendee').clone()

$('.newAttendee')クラスnewAttendeeを持つすべてのelmentsを選択するので、これがあるだけでクローンにそれらの1

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

$( '。newAttendee')を使用すると、より良い結果が得られます。clone().. removeClass( 'newAttendee')。appendTo( '。attendees'); –

+0

@SideriteZackwehdexそれはCSSやその他のコードに影響する可能性があります。 – charlietfl

+2

私は、コードの意図はnewAttendeeクラスでスパンを追加するのではなく、テンプレートとしてのみ使用することだと思います。もしそうでなければ、そうです。 –

0

first()last()を使用してみてくださいそのクラスを持つすべての要素のクローンを作成しますので。 そしてそれをクローンした後、あなたは2というようになります。 クローン作成後にクラスを変更すると、これを回避できます。

関連する問題