jQuery clone() FireFox Bug - kann kein geklontes Formular senden

Question

Ich möchte dynamisch Formulare hinzufügen/entfernen. Ich verwende Formulare, die in einer Tabelle gespeichert sind, jede Zeile hat ein Formular. Ich habe 2 Tabellen: - die eine angezeigt wird - die mit der temporären Zeile umgeben, die ich klonen und in die angezeigte Tabelle einfügen möchte.

Alles funktioniert in IE aber die geklonte Zeile mit seiner Form in Firefox kann nicht eingereicht werden. Wenn ich die Zeile nicht klone, sondern sie einfach einfüge, kann ich das Formular senden, aber ich muss diese Zeile wieder verwenden können, um sie wieder einzufügen, sodass ich das Klonen verwenden muss. HTML-Code, der mit und ohne Klonen generiert wird, sieht in Firebug gleich aus. Wie kann ich dieses Problem überwinden?

-Code für das Klonen verwendet und beim Einfügen der Zeile: $('#tempRow').clone().insertAfter($('#templatesTable tr:last'));

Answer 1

Sie können es in das DOM nicht zuverlässig etwas mit einem ID-Attribute klonen und wieder einsetzen. Dadurch wird ein ungültiges HTML-Dokument erstellt, da Sie zwei Elemente mit derselben ID haben. Firefox verhält sich korrekt.

Was Sie tun müssen, ist das Klonen des Formulars und ändern Sie dann alle IDs in etwas einzigartiges (das Formular und alle seine Eingaben und untergeordneten Elemente). Dann können Sie das Formular abschicken.

Es sieht so aus, als ob Sie ein tr Element klonen und es in eine Tabelle einfügen? Wenn das tr Element der einzige mit einer ID ist, wird diese Arbeit:

$('#tempRow') 
    .clone() 
    .attr('id', 'tempRow-new') 
    .insertAfter($('#templatesTable tr:last')); 

Denken Sie aber daran, dass, wenn das Formularelement – oder irgendetwas davon Kinder, darunter div, frameset, input usw. – hat Eine ID muss entweder entfernt oder geändert werden. Andernfalls haben Sie immer noch ein ungültiges Dokument und möglicherweise weiterhin Probleme.

Zusätzlich

Der obige Code-Schnipsel ist nicht wiederverwendbar. Sobald Sie versuchen, das Formular ein zweites Mal zu klonen, haben Sie zwei Elemente mit der ID tempRow-new. Wenn Sie die Zeile mehrmals klonen müssen, müssen Sie eine steigende Zahl oder eine UUID hinzufügen, um sicherzustellen, dass alle geklonten Elemente eindeutig sind.