我的Javascript代码是这样的：

var j = 1;
$('body').on('click', '.btn-add-detail', function(){
    $('#pax_dob_2').attr('id','pax_dob_' + j);
    $('#pax .clone').clone().appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
    $("#pax_dob" + j).datepicker({
        dateFormat: "yy-mm-dd",
        format: "yyyy-mm-dd",
        orientation: "left", 
        autoclose: true,
        changeYear : true,
        changeMonth : true,
        yearRange: "-100:+0"
    });
});

我的完整代码和演示是这样的：https://jsfiddle.net/oscar11/w4zf690v/

当我添加多个并且我单击输入datepicker时,datepicker无法正常工作

解决我的问题的任何解决方案？

非常感谢你

解决方法:

您可以为日期字段使用公共类,只需为新克隆的元素初始化datepicker.

$('body').on('click', '.btn-add-detail', function() {
  // clone the element 
  $ele = $('#pax .clone').clone();
  // append it to parent and do the rest
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // get the date input and initialize the datepicker
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});

$('body').on('click', '.btn-add-detail', function() {
  $ele = $('#pax .clone').clone();
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // or just initialize for the appended
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>

或者与链接方法相同.

$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});

$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>