jQuery Datepicker не работает в динамическом элементе

У меня проблема. jQuery Datepicker не работает в динамической форме, поэтому вы не можете выбрать дату. Вот моя демонстрационная ссылка http://gestionale.odoyabooks.com/sum.php.

JavaScript: 

<script>
$(document).ready(function() {
    $('.input_date').on('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
</script>

HTML: 

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="date" for="date">Date</label></td>
          </tr>
          <tr>
            <td><input class="input_date" id="date" type="text" name="date[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>

</form>
Author: User4407, 2013-08-01
Source

2 answers

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

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

$(function() {
    $('body').on('click','.input_date', function() {
        $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
    });
});

Рабочий Пример

Лучший способ:

Вы должны инициализировать указатель даты для поля при создании элемента.

$(function() {
    $('.input_date').datepicker();
});

function createNewDatepickerInput() {
    var $newInput = $('<input type="text" name="date123" class="input_date" />');
    $newInput.appendTo("form").datepicker();
}

Рабочий Пример

 14
Author: DesignerGuy, 2014-10-02 04:59:36

Я не понимаю, почему вы уничтожаете/повторно инициализируете указатель даты. Вам просто нужно вызвать .datepicker() после создания элемента. Например:

function createInput() {
    $('<input type="text" name="date" />').appendTo("form").datepicker();
}

Редактировать: Вот демонстрация: http://jsfiddle.net/xEmJu/

 1
Author: Webberig, 2013-08-01 19:18:24