javascript - 如果克隆的话， Bootstrap 日期选择器将无法工作

Question

通过使用 jquery clone() 我正在重复文档的 div 部分。该 div 还包含 Bootstrap 日期选择器。但是，克隆 div 的日期选择器将无法工作。我正在使用这个日期选择器 https://eonasdan.github.io/bootstrap-datetimepicker/

注意:在代码片段中，在选择文件选项中添加多个文件，然后只有您会看到额外的日期选择器。

/* Depending on number of documents description box and datepicker will repeat */

$("#docsUpload").change(function() {
   $("#multiShow").empty();                 // removes child elements
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    var ff = result[0];
    $("#ff").html("<strong> File Name : </strong>"+ ff.name);

    for(var x = 0;x< result.length-1;x++){
       var fle = result[x+1];
       $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
       $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name);
       $('#multiShow').append("</div><div class='col-sm-3'></div></div>");
       $("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
    }
});


/* depending on selection box type of date changes */
$(document).ready(function(){
   $(".static").show();  // always display on page load
   $(".period").on('change',function(changeEvent){  //selection box value changed
    // var realId = $(".period").closest("div[id]").attr("id"); //get id
    var realId = $(changeEvent.target).closest("div[id]").attr("id");
    $('#'+realId+' .dateSelector').hide();
    //alert('#'+realId+' '+'.dateSelector');  // display id only show 'selectAll'

     var operation = '.'+this.value;
     $('#'+realId+' '+operation).show();

   });           // on period change
});     // document ready state


/* Format of datepicker */
$(document).ready(function(){
    $('.datetimepicker1').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.datetimepicker2').datetimepicker({
      format : "MM/YYYY"
    });
    $('.datetimepicker3').datetimepicker({
      format : 'YYYY'
    });
    $('.datetimepicker5').datetimepicker({
      format : 'YYYY'
    });
    $('.datetimepicker7').datetimepicker({
     format : 'YYYY'
    });
    $('.datetimepicker9').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.datetimepicker10').datetimepicker({
     format : "DD/MM/YYYY"
    });
});

.dateSelector{
    display: none;
  }

  h1{
    color:#2F4F4F;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>


<div class="container-fluid">




<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
   method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <label for="upload">Upload Files : </label>
  <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
    <span id="ff"></span>
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->


<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group">
  <label for="upload"> Select Type & Date of document below:  </label>
  </div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
  <div class="form-group">
  <select name="period" class="period">
    <option value="static" selected="selected">Static</option>
    <option value="monthly">Monthly</option>
    <option value="quaterly">Quaterly</option>
    <option value="semester">Semester</option>
    <option value="yearly">Yearly</option>
    <option value="other">Other</option>
  </select>
  </div>
</div>

<!-- begin : datepicker -->
<div  class="col-sm-4 dateSelector static">
    <div class="input-group date datetimepicker1">
      <input type="text" name="staticDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
    </div>
</div>

<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker2">
    <input type="text" name="monthlyDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>

<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
  <option value="first">January - March</option>
  <option value="second">April - June</option>
  <option value="third">July - September</option>
  <option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker3">
    <input type="text" name="quaterlyDate" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
  <option value="semfirst">April - September </option>
  <option value="semsecond">October - March</option>
</select><br/><br/>
</div>

<div class="col-sm-2">
<div class="input-group date datetimepicker5">
  <input type="text" name="semesterDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker7">
    <input type="text" name="yearDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker9">
    <input type="text" name="otherDateF[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker10">
    <input type="text" name="otherDateS[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>


<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->

<div id="multiShow"> </div>

<!-- end : datepicker -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->

Answer 1

将日期选择器克隆到 DOM 后，您必须执行以下操作才能将日期选择器绑定(bind)到新创建的元素，我建议将相同的 class 应用于所有日期选择器 inputs 并按如下方式绑定(bind)日期选择器。

您还可以阅读此documentation欲了解更多信息

$('.datepicker').datepicker('update');