为什么多个日期选择器不起作用？

Question

My Javascript code is like this :

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

My full code and demo is like this : https://jsfiddle.net/oscar11/w4zf690v/

When I add multiple and I click input datepicker, the datepicker not working

Any solution to solve my problem?

Thank you very much

Answer 1

You can use a common class for the date field and just initialize the datepicker for the newly cloned element.

$('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>

---

Or the same with chaining methods.

$('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>

Answer 2

When you clone something - you also clone its id - therefore when you append it into another element - you are also appending a duplicated id. You need to ensure that the id of the cloned element is altered before appending it.

perhaps as you are appending it - you could alter its id with

//js 
var new ID = uniqueContent;
 .attr('id', newID);