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

Question

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

我已经看到这个Use JQuery Datepicker on dynamic created fields 和 this jquery datepicker on cloned elements 和 this put datepicker() on dynamic created elements - JQuery/JQueryUI 但似乎没有一个对我有用。

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/

标签： jquerydatepickerjquery-ui-datepicker

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