Php jQuery Datepicker在动态元素中不工作

我有个问题。jQuery Datepicker不能在动态表单中工作，因此不能选择日期。这是我的演示链接

JavaScript:

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

$（文档）.ready（函数（）{
$（'.input_date'）。在（'单击'，函数（）上）{
$（this.datepicker（'destroy'）.datepicker（{shown:'focus'}）.focus（）；
});
});

HTML:

日期

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

通过使用选择器

.input\u 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();
}

$（函数（）{
$（'.input_date'）.datepicker（）；
});
函数createNewDatepickerInput（）{
变量$newInput=$（''）；
$newInput.appendTo（“form”）.datepicker（）；
}

---

我不明白您为什么要销毁/重新初始化日期选择器。 创建元素后，只需调用.datepicker（）。例如：

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

函数createInput（）{
$（“”）.appendTo（“form”）.datepicker（）；
}

编辑：

---

这里有一个演示：

我认为你把事情复杂化了。我不明白为什么你需要销毁它，重新初始化它，并在点击输入框后聚焦…@Webberig-我没有改变里面的代码。我刚刚更改了事件绑定，因为我认为这就是问题所在。我认为最好保持OPs代码不变。尽管在评论中提到任何缺陷都有助于这家伙理解他可能犯的其他错误，但我在此指出，OPs代码+你的答案让事情变得过于复杂。您只需要在创建输入字段后调用datepicker（），而不是像单击事件那样乱来…谢谢！对我来说太棒了！都在

Chrome

和

FF

：）

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