Wie klonen Sie Ereignisse und Daten zu klonen, sondern auf den neuesten Klon anzuwenden?

Question

Sie können ein Element mit seinen Ereignissen und Daten klonen, aber dann gelten die Ereignisse immer noch für das ursprüngliche Objekt und nicht für das neue Objekt.

I jsfiddle verwendet haben, das Problem zu demonstrieren: http://jsfiddle.net/VZZG4/

zu reproduzieren: 1. Drücken Sie die Taste Klon 2. Im neuen Texteingabe, geben Sie „Neu“ 3. Drücken Sie die neue Klon-Taste Tatsächliches Ergebnis: Der neueste Klon lautet "Test" Erwartetes Ergebnis: Der neueste Klon lautet "Neu"

Frage: Wie klonen Sie Ereignisse und Daten zum Klonen, sondern gelten sie für den neuesten Klon?

Answer 1

Einsatz am nächsten(), um das erwartete Element zu klonen ...

$(document).ready(function() { 
    $('#clone').click(function() { 
     $(this).closest('#container').clone(true).appendTo('#wrap'); 
    }); 
}); 

updated fiddle

und ich schlage vor, Sie class anstelle eines id zu verwenden. Duplikat id ist kein gültiger HTML-Code.

Answer 2

Sie machen den Fehler, Objekte mit IDs zu klonen. Wenn Sie in den meisten Browsern mehrere Elemente mit derselben ID haben, wird die erste zurückgegeben. Daher gibt $('#container') immer die erste mit dem Wert Test zurück.

Geben Sie stattdessen die Elemente an, die geklont werden sollen.

HTML:

<div id="wrap"> 
    <div class="container"> 
     <input type="text" class="edit" value="Test"> 
     <input type="button" class="clone" value="Clone"> 
    </div> 
</div> 

JavaScript:

$(document).ready(function() { 
    $('.clone').click(function() { 
     $(this).closest('.container').clone(true).appendTo('#wrap'); 
    }); 
}); 

Überprüfen Sie die modifizierte Version des Codes http://jsfiddle.net/VZZG4/2/

Referenz:closest