Question

我有问题。 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>

Answer 1

问题在于，当您最初绑定事件时，新字段不存在。

通过使用选择器.input_date将点击应用于正文，它应该将事件附加到动态表单中的新元素。

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

<强> Working Example

更好的方法：

您应该在创建元素时初始化字段的日期选择器。

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

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

<强> Working Example

Answer 2

我不明白你为什么要破坏/重新初始化datepicker。您只需在创建元素后调用.datepicker（）。例如：

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

编辑：这是一个演示：http://jsfiddle.net/xEmJu/

jQuery Datepicker在动态元素中不起作用

2 个答案:

更好的方法：