为什么多个datepicker无法正常工作？

时间：2016-09-23 04:46:31

标签： javascript jquery html datepicker

我的Javascript代码是这样的：

LIKE

我的完整代码和演示如下：https://jsfiddle.net/oscar11/w4zf690v/

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

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

非常感谢

2 个答案:

答案 0 :(得分：1)

您可以为日期字段使用公共类，只需初始化新克隆元素的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"
  });
});

＆＃13;
＆＃13; 
$('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();
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或者与链接方法相同。

$('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"
    });
});

＆＃13;
＆＃13; 
$('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();
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

当您克隆某些内容时 - 您还会克隆其ID - 因此当您将其附加到另一个元素中时 - 您还会附加重复的ID。您需要确保在添加克隆元素之前更改克隆元素的ID。

也许当你追加它时 - 你可以用

改变它的id 
//js 
var new ID = uniqueContent;
 .attr('id', newID);
相关问题
最新问题