Question

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

我正在使用jQuery ui datepicker

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追加时不显示在动态字段中。

是否可以为动态生成的字段初始化datepicker？

Answer 1

好像你永远不会在文件中添加datepicker2。如果是这种情况，你必须调用类似这样的东西

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

之前

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

请参阅：http://codepen.io/8odoros/pen/xOqyQm

Answer 2

请尝试以下代码。

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

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

jQuery datepicker没有显示在html中动态生成的输入字段中

2 个答案: