Jquery append-Klon versteckte html-immer wieder
Ich habe ein Formular und ich muss Optional wiederholen (Klonen und anfügen) einen großen block bilden die Felder über und über.
So, was ich getan habe, ist in einem versteckten div auf der Seite mit den code würde ich wollen, kopieren Sie Sie hinein, und dann habe ich im Grunde möchten, dass der Benutzer in der Lage sein, um Sie auf eine Schaltfläche mit der Aufschrift "add" und fügt diese leere Formular-Felder unter den letzten Menge für wie viele Male, wie Sie wollen.
Html ich möchte Klon ist wie folgt:
<div style="display: none;">
<div class="grab-me">
<input name="foo[]" />
<input name="bar[]" />
<input name="oth[]" />
</div>
</div>
Dem jquery habe ich im moment:
$(function(){
$('.add-member').live("click", function(e){
e.preventDefault(e);
var grab = $('.grab-me');
grab.appendTo('#register');
});
});
Aber was tut, ist das duplizieren des Formulars die Felder auf jedem klicken der Schaltfläche. Also ich Klick einmal, fügt es die form-Felder einmal wie erwartet. Klicken Sie auf die Taste erneut, fügt es die form-Felder zweimal in dieser Zeit, klicken Sie erneut, es fügt drei Sätze von Formular-Feldern!
Ich will nur Sie, und fügen Sie die Formularfelder auf einmal bei jedem Klick.
Jede Beratung wäre wirklich dankbar empfangen!
- Verwenden Sie nicht
.live()
mehr, es ist veraltet. Verwenden.on()
statt, sondern die Dokumentation Lesen, bevor Sie tun. - Danke Jack, ich bin mir durchaus bewusst, dass aber der client ist mit 1.6.3 und nicht ändern wollen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das ist, weil, sobald es kopiert, Sie haben dann zwei
.grab-me
Elemente. Entfernen Sie die Klasse nach dem Klonen das element:$('.nehmt mir').eq(0), um nur eine form (die erste form mit der Klasse grab-mich)
Gibt es ein paar Dinge, die Sie tun können, ist die einfachste, die mir in den Sinn kommt, ist den .first () - Aufruf:
Das problem, das Sie gestoßen ist, nachdem Sie es das erste mal, wenn Sie am Ende mit zwei divs, die haben die .grab-mich-Klasse, so dass Ihr jquery schnappt sich die beiden.
$("#register .grab-me").removeClass("grab-me");
. Einfacher als Klonen 🙂