jQuery datepicker 未显示在 html 中动态生成的输入字段中答案

【问题标题】：jQuery datepicker not showing in dynamically generated input fields in htmljQuery datepicker 未显示在 html 中动态生成的输入字段中
【发布时间】：2016-06-29 07:47:05
【问题描述】：

我有两个输入字段，一个直接在 html 页面中编码，另一个通过 JavaScript 附加，我已经为两个具有不同 id 的字段初始化了 jQuery datepicker。

我正在使用 jQuery ui 日期选择器

html页面中的一个输入字段

<input id="datepicker1" name="" type="text" value=""class="form-control" placeholder="dd/mm/yyyy">

通过javascript代码附加的其他

   var datepicker2 = '<div class="control-group"> <label class="control-label">Cheque Date</label><div class="controls"> <input placeholder="DD/MM/YYYY" id="datepicker2" name="" type="text" onkeyup="" class="form-control"> </div> </div>'
   $("#drop1").html(datepicker2); 


  $( "#datepicker1" ).datepicker();

  $( "#datepicker2" ).datepicker();

问题是日期选择器在 html 页面中显示静态输入字段，而在通过 JavaScript 追加时未显示在动态字段中。

是否可以为动态生成的字段初始化日期选择器？

【问题讨论】：

将启动日期选择器的代码包装在$(document).ready() 中。问题是您试图在呈现之前访问元素。
这些字段显示在模式（弹出窗口）中。
使用.datepicker( "refresh" )也许能解决你的问题。
问题是当.datepicker() 被调用时，元素没有被渲染。检查元素是否存在，然后初始化它

标签： javascript php jquery html jquery-ui-datepicker

【解决方案1】：

您似乎从未将 datepicker2 添加到文档中。如果是这种情况，你必须调用这样的东西

$('body').append(datepicker2);//You may replace 'body' with '#drop2' or whatever is your container

之前

$( "#datepicker2" ).datepicker();

见：http://codepen.io/8odoros/pen/xOqyQm

【讨论】：

【解决方案2】：

试试下面的代码。

在输入字段中添加公共类.date_picker并添加以下javascript

$('body').on("click", ".date_picker", function(){
  $(this).datepicker();
});

【讨论】：

每次调用 .date_picker 时，您都在创建日期选择器。你应该只调用一次。