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;。

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

jquery .clone（）在Firefox中的奇怪行为

2 个答案: