jQuery的克隆（）FireFox的错误 - 无法提交克隆的表单 [英] jQuery clone() FireFox bug - can't submit a cloned form

问题描述

我想添加/删除动态表单。我使用存储在表中的表单，每一行都有表单。我有两个表格：
- 显示的是
- 用我想要克隆并插入到显示的表格中的临时行所包围的那个表格。

在IE中一切正常，但是在Firefox中的表单克隆行不能被提交。如果我不克隆行但只是插入它，我可以提交表单，但我需要能够重用该行再次插入，所以我需要使用克隆。生成有和没有克隆的HTML代码在Firebug中看起来是一样的。如何克服这个问题？
$ b

用于克隆和插入行的代码：

$（'＃tempRow' ）.clone（）。insertAfter（$（'＃templatesTable tr：last'））;


解决方案

将其插入到DOM中。这会创建一个无效的HTML文档，因为您有两个具有相同ID的元素。 Firefox的行为是正确的。

你需要做的是复制表单，然后将ALL ID改为独特的东西（表单及其所有输入和子元素）。然后你就可以提交表单。

看起来你正在克隆一个 tr 元素并插入它变成一张桌子？如果 tr 元素是唯一具有ID的元素，那么这将起作用：

  .clone（）
 .attr（'id'，'tempRow-new'）$ b $ .insertAfter（$（'＃templatesTable tr：last ））;但是请记住，如果表单元素ndash;或者它的任何子元素，包括<$ c $; 
 $; 
 
 
 
 $ b> c> div ， frameset ， input ，等等。将需要删除该ID，或改变它。否则，你仍然有一个无效的文件，并可能仍然有问题。  
 
 
 另外  
 
 
以上代码片段不可重复使用。只要您尝试第二次克隆表单，就会有两个ID  tempRow-new 的元素。如果您需要多次克隆该行，则必须添加一些增量编号或某种类型的UUID，以确保所有克隆的元素都是唯一的。
 
I want to add/remove dynamically forms. I'm using forms that are stored in  a table, each row has form. I have 2 tables:
- the one being displayed
- the one surrounded by   with the temporary row that I want to clone and insert into the displayed table.

Everything works fine in IE but the cloned row with its form in Firefox can't be submitted. If i don't clone the row but just insert it, I can submit the form  but I need to be able to reuse that row to insert it again so I need to use cloning. Html code generated with and without cloning looks the same in Firebug. How can I overcome this problem?

Code used for cloning and inserting row:

$('#tempRow').clone().insertAfter($('#templatesTable tr:last'));
解决方案
You can't reliably clone something with an ID attribute and re-insert it into the DOM.  This creates an invalid HTML document, because you have two elements with the same ID.  Firefox is behaving properly.

What you'll need to do is clone the form and then change ALL ID's to something unique (the form and all of its inputs and child elements).  Then you'll be able to submit the form.

It looks like you are cloning a tr element and inserting it into a table?  If the tr element is the only one with an ID, this will work:
$('#tempRow')
    .clone()
    .attr('id', 'tempRow-new')
    .insertAfter($('#templatesTable tr:last'));
Remember, though, that if the form element–or any of it's children, including div, frameset, input, etc.–has an ID, you'll need to either remove that id, or change it.  Otherwise you'll still have an invalid document, and may still have problems.  

Additionally  

The above code snippet is not reusable.  As soon as you try to clone the form a second time, you'll have two elements with the id tempRow-new.  If you need to clone the row multiple times, you'll have to add some incrementing number or a UUID of some sort to ensure that all cloned elements are unique.

                        
这篇关于jQuery的克隆（）FireFox的错误 - 无法提交克隆的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！