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.
InformationsquelleAutor John | 2013-03-11
Schreibe einen Kommentar