jQuery: проблема с представлением элементов динамической формы

Question

Я пытаюсь отправить форму, содержащую динамические элементы, которые были добавлены в DOM с помощью jQ после того, как страница завершила загрузку.

Когда я запускаю serialize() в форме, он захватывает данные для всех полей, жестко закодированных на странице, но не динамических полей.

Вот некоторые фрагменты кода одного и того же ..

HTML

<form id="someform" name="someform" method="post" action""> 
    <input type="text" name="afield" /> 
<ul id="somelist"> 
</ul> 
<input type="submit" name="submit" /> 
</form> 

<img id="add" src="add-button.png" /> 

<div class="new_unit" style="display:none"> 
<input type="text" name="somefield" /> 
</div> 

JavaScript

<script type="text/javascript"> 
// Adds a new field to the form 
$('#add').click(function() { 
$('#somelist').append('<li>' + $('.new_unit').html() + '</li>'); 
}); 

// Validate before submission 
$('#someform').validate({ 
......., 
....., 
submitHandler: submit_form 
}); 

function submit_form() { 
_data = $('#someform').serialize(); 
alert(_data); 
} 
</script> 

После нажатия кнопки представить данные в статическом поле, афиша появляется ... но любой некоторые поля, добавленные jQuery, нет.

Я нашел пару similar questions здесь. Я согласен с предлагаемым решением, но без эффекта.

Я использую последнюю версию jQuery (1.4.1) - и рассмотрел возможность играть с связующим событием live(). У меня есть чувство, которое может помочь решить эту проблему, но не может понять, как использовать ее в сочетании с плагином validate().

Любые предложения?

Спасибо, м^е

Answer 1

Проблема заключается в том, что ваши динамически добавлены поля все одинаковые имена. Вам нужно либо дать им разные имена, либо, в зависимости от того, что вы используете на сервере, вы можете дать им имя, например somefield[], для их агрегирования (PHP и я считаю, что Python справляется с этим).

Чтобы дать им другое название, это могло бы быть немного легче сделать это:

<input type="text" id="copy" /> 

и:

$("#add").click(function() { 
    $("#copy").clone().removeAttr("id").attr("name", "field[]") 
    .appendTo("#somelist").wrap("<li>") 
});