JQuery DatePicker не отображается на динамически добавленных ввода

Question

У меня есть таблица, каждая ячейка которой является частью формы. В моей форме у меня есть JQuery DatePicker применить к элементу ввода:

<form method="post" action="test.php">
                <table>
                    <tr>
                     ....
                        <td>
                            <input type="text" id="date" name="test"/>
                        </td>
                     ....
                    </tr>
                </table>
                <button type="button" id="addLine">Add line</button>
                <button id="submit" type="submit">Submit</button>
            </form>

Я добавляю свой DatePicker, как это:

$(document).ready(function() {
            $('#date').datepicker({showAnim: "slideDown"});   
        });

Здесь возникает проблема... я хочу добавить строку в мою таблицу, но средство выбора даты не применяется к новой добавленной строке...

$(document).ready(function() {
            $('#addLine').click(function() {
                var line = $('<tr>...<input type="text" id="date" name="test"/>...</tr>');
                $('table').append(line);
              });
        });

Появляется новая строка, но когда я хочу вставить значение, средство выбора даты не появляется в новой созданной строке.

я пытался вставить еще один $('#date').datepiker()... в мой.click(функция... но это не работает. Я также пытался обновить dom с помощью метода call page().. но у меня ошибка, что метод не существует в элементе. Мне нужна ваша помощь!

Спасибо

Answer 1

У вас не может быть нескольких идентификаторов с одним и тем же значением, что может вызвать некоторые из ваших проблем. Вместо этого используйте имя класса, например class="date"

<input type="text" class="date" name="test"/>

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

Так:

line.find(".date").datepicker({showAnim: "slideDown"})

Пример: http://jsbin.com/omoyiy/2/edit