在动态克隆的字段上激活日期选择器

Question

我正在克隆一组字段，其中一个是 datepicker 字段。

我看到了还有这个 jquery datepicker on cloned elements 还有这个 putting datepicker() on dynamically created elements - JQuery/JQueryUI 但是 none 似乎对我有用。

HTML:

<div class="dedicationfields">
  <div class="form-group">
    <div class="col-md-12">
      <div class="col-md-6">
        <label class="datetag"> date: </label>
        <input placeholder="enter date" name="requestedDate"
           value="" size="30" class="required form-control datepicker  " 
           title=" " id="dp1529938300566" type="text">
      </div>
    </div>
  </div>
</div>
<div class="form-group" style="margin-top: 3px;">
  <input name="triggerAdd" id="triggerAdd" class="btn btn-success" value="ADD A NEW SET" type="button">
</div>

JS 代码：

$("#triggerAdd").click(function(){

    // clone fields:
   var dedicationfields = $(".dedicationfields:first").clone(true).insertAfter(".dedicationfields:last");

    //make sure new fields are empty: 
    $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');    

    $(".dedicationfields:last .datepicker" ).removeClass('hasDatepicker'); // added the removeClass part.

});

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

这是一个演示：https://jsfiddle.net/kneidels/w12cx7qt/11/

Answer 1

你可以试试这个代码

    $("#triggerAdd").click(function(){

       var $last   = $('.dedicationfields:last');
       var $clone  = $last.clone(false);
       $last.after($clone);
       $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');
       $clone.find('input.datepicker')
            .removeClass('hasDatepicker')
            .removeData('datepicker')
            .attr('id', 'change_id' + Math.random())
            .unbind()
            .datepicker();
            });

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

您可以根据自己的喜好自定义 change_id ID 属性。

jsfiddle

在动态克隆的字段上激活日期选择器

activating datepicker on dynamically cloned fields

jquery

datepicker

jquery-ui-datepicker