jQuery clone() FireFox 错误 - 无法提交克隆的表单

Posted 2023-02-22

【中文标题】jQuery clone() FireFox 错误 - 无法提交克隆的表单

【英文标题】：jQuery clone() FireFox bug - can't submit a cloned form

【发布时间】：2011-05-14 11:11:17

【问题描述】：

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

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

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

【问题讨论】：

你的标记是什么样的？

【参考方案1】：

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

您需要做的是克隆表单，然后将所有 ID 更改为唯一的 ID（表单及其所有输入和子元素）。然后您就可以提交表单了。

您似乎正在克隆tr 元素并将其插入到表格中？如果 tr 元素是唯一具有 ID 的元素，则可以这样做：

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

但请记住，如果表单元素（或其任何子元素，包括 div、frameset、input 等）具有 ID，则您需要删除该 ID，或者更改。否则你仍然会有一个无效的文档，并且可能仍然有问题。

另外

上面的代码 sn -p 是不可重用的。当您再次尝试克隆表单时，您将拥有两个 ID 为 tempRow-new 的元素。如果您需要多次克隆该行，则必须添加一些递增的数字或某种 UUID 以确保所有克隆的元素都是唯一的。

【讨论】：

是的，这似乎解决了 Firefox 中的问题。但是，我在 IE 中出现错误： var cloned = $('#tempRow').clone().attr("id","tr" + trLastId); $('form', 克隆).attr("id","form" + trLastId);最后一行给出错误“对象不支持此属性或方法”。我正在使用 jquery 1.3.2。

这很奇怪...您的代码看起来还不错。在 Firebug 中，你可以这样做吗：console.debug($('form', cloned).length);