jQuery clone()FireFox bug - 无法提交克隆表单

Question

我想添加/删除动态表单.我正在使用存储在表中的表单,每行都有表单.我有2个表: - 正在显示的表 - 由我要克隆的临时行包围并插入显示的表中的表.

在IE中一切正常,但无法提交在Firefox中具有其表单的克隆行.如果我没有克隆行但只是插入它,我可以提交表单,但我需要能够重用该行再插入它,所以我需要使用克隆.使用和不使用克隆生成的Html代码在Firebug中看起来相同.我怎样才能克服这个问题？

用于克隆和插入行的代码: $('#tempRow').clone().insertAfter($('#templatesTable tr:last'));

Answer 1

您无法可靠地克隆具有ID属性的内容并将其重新插入DOM.这会创建一个无效的HTML文档,因为您有两个具有相同ID的元素.Firefox表现正常.

您需要做的是克隆表单,然后将所有ID更改为唯一的(表单及其所有输入和子元素).然后你就可以提交表格了.

看起来你正在克隆一个tr元素并将其插入表中？如果tr元素是唯一具有ID 的元素,则可以使用:

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

但要记住,如果表单元素,或任何它的孩子,其中包括div,frameset,input,等等-有一个ID,你需要或者删除ID,或改变它.否则你仍然会有一个无效的文件,可能仍然有问题.

另外

上面的代码段不可重用.一旦您尝试第二次克隆表单,您将拥有两个带有id的元素tempRow-new.如果需要多次克隆该行,则必须添加一些递增的数字或某种类型的UUID,以确保所有克隆的元素都是唯一的.