jquery .clone() странное поведение в Firefox

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'); 
}); 

Поэтому в основном я первый клон ДИВ со всем содержимым, а затем просто настроить идентификаторы и другие атрибуты.

Проблема в том, что при запуске этого кода все отображается на странице и выглядит нормально, но когда я отправляю форму, кажется, что на сервер отправляется только первый элемент.

Этот код отлично работает в Chrome и даже IE, но не в Firefox. Любые предложения о том, что я делаю неправильно или что может вызвать эту проблему?

Заранее благодарен!

Answer 1

Проблема решена. Благодаря Gazler, хотя не было никаких проблем с фактической консолью ошибок HTML и Firefox не показывали никаких сообщений, я проверил Developers Tools в 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;.

В случае сомнений, очистить свой код и вещи могут просто исправить себя.