使用jquery动态添加日期选择器不起作用

Question

我正在开发一个网页，其中有一个日期选择器。当我直接将它放在HTML代码中时，日期选择器的效果非常好。只需单击输入框即可。但是，当我尝试使用jquery动态添加相同的元素（从HTML中删除它）后，当我点击它时它不会弹出日历。

这是HTML和javascript代码：

$("#deliv_info").append(
  '<a>Delivery Date:</a><br>' +
  '<input class="input_box" id="inputField_2" /><br><br>'
  );

<!--  This works fine
<a>Delivery Date:</a><br>
<input class="input_box" id="inputField_2" /><br><br>
-->

<!-- This one does not work  -->
<div id="deliv_info">
</div>

在这里，它没有添加jquery：

Answer 1

像这样初始化你的日期选择器，

$('#deliv_info').on('focus',"#inputField_2", function(){
    $(this).datepicker(); 
});​

Answer 2

使用此，

$(document).on('focus',"#inputField_2", function(){
    $(this).datepicker();
});

传统方法适用于动态html文本框，但是这个方法经过测试并且工作正常。

Answer 3

您可以执行以下操作：

var input = $("<input/>", {
                class: 'input_box',
            })
$(input).datepicker();

$("#deliv_info").append(input);

我做了一个小提琴example