Firefox 中的 jquery .clone() 奇怪行为

Question

我有以下问题 - 我正在使用 jQuery 向页面添加额外的输入表单。但是添加的行不会通过表单提交传递给服务器。

这是一行的 HTML：

<form name="form1" method="post" action="">

<div id="input1" class="clonedInput">

<label for="answer1" class="answer_label"> Answer: </label>
<input type="text" name="answer1" id="answer1" value="Answ1"/>
<label for="answer1pt"> Points: </label>
<input type="text" name="answer1pt" id="answer1pt" size="2" value="1"/>

我使用以下 JavaScript 进行克隆：

$('#btnAddAnswer').click(function() {

var num  = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

newElem.find(":nth-child(1)").attr('for', 'answer' + newNum);
newElem.find(":nth-child(2)").attr('id', 'answer' + newNum).attr('name', 'answer' + newNum).attr('value', '');
newElem.find(":nth-child(3)").attr('for', 'answer' + newNum + 'pt');
newElem.find(":nth-child(4)").attr('id', 'answer' + newNum + 'pt').attr('name', 'answer' + newNum + 'pt').attr('value', ''); 

$('#input' + num).after(newElem);
$('#btnDelAnswer').attr('disabled','');

if (newNum == 5)
        $('#btnAddAnswer').attr('disabled','disabled');
});

所以基本上我首先克隆所有内容的 div，然后调整 id 和其他属性。

问题是，当运行这段代码时，页面上显示的一切似乎都正常，但是当我提交表单时，似乎只有第一个元素被发送到服务器。

这段代码在 Chrome 甚至 IE 中都能完美运行，但在 Firefox 中却不行。关于我做错了什么或可能导致此问题的任何建议？

提前致谢！

Answer 1

问题解决了。谢谢Gazler，虽然实际的 HTML 没有问题，并且 Firefox 错误控制台没有显示任何消息，但我在 Chrome 中检查了开发人员工具，它说 div 标签在表格主体内，这显然导致了所有麻烦。

Answer 2

我可以强烈建议您尝试使用类而不是 nth-child 来清理选择器吗？它将使您的所有代码更具可读性。例如，如果您有如下标记：

<label class="answer-label" for="answer1">...</label>
<input type="text" class="answer-box" name="answer1" class="answer1" />

那么你可以使用这个更漂亮的 Javascript：

newElem.find(".answer-label").attr('for', 'answer' + newNum);

另外，您可能想考虑只存储一个变量而不是 num 和 newNum。这样，每次你可以只做num++; 而不是var newNum = new Number(num+1);。 （我也不确定你为什么要做new Number(num+1) 而不仅仅是var newNum = num+1;。

如有疑问，请清理您的代码，事情可能会自行解决。