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>

После нажатия кнопки отправки появляются данные в статическом поле afield ... но ни одно из somefields , добавленных jQuery, отсутствует.

Я нашел пару похожих вопросов здесь. Я соблюдаю предложенное решение, но безрезультатно.

Я использую последнюю версию 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>")
});