jQuery DatePicker：多个输入给出错误

Question

我正在使用 jQuery DatePicker 插件。

功能

目前我正在处理一种具有 table 的表单，并且允许用户通过单击按钮向 table 添加行。工作得很好。

现在我想实现 DatePicker 插件，这样用户就可以通过单击添加日期。

问题

目前我遇到一个问题，当用户添加一行时，日期选择器停止工作。我正在使用 class 这样它就不会产生问题。 我尝试过的 是在用户添加新行时破坏日期选择器实例，但这样做会给我一个错误

Uncaught TypeError: Cannot read property 'append' of undefined

我尝试了 google，但其中 none 与我关于此错误的问题相关。

谁能帮我解决这个问题？

( function( $ ) {
  
//Add Row  
  function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount < 5){       // limit the user from creating fields more than your limits
   var row = table.insertRow(rowCount);
   var colCount = table.rows[0].cells.length;
   for(var i=0; i<colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
   }
  }else{
    alert("Currently You can add only up to 5 Exams.");
       
  }
 }
//Delete Row 
 function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for(var i=0; i<rowCount; i++) {
   var row = table.rows[i];
   var chkbox = row.cells[0].childNodes[0];
   if(null != chkbox && true == chkbox.checked) {
    if(rowCount <= 1) {       // limit the user from removing all the fields
     alert("Cannot Remove all fields.");
     break;
    }
    table.deleteRow(i);
    rowCount--;
    i--;
   }
  }
 }
 $( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );
  
 $(".add_").click(function(){
  addRow('dataTable');
  $(".datepicker").datepicker("destroy");
  //$( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );
  //alert("Alert");
 });
  
} )( jQuery );

{
    padding: 0;
    margin: 0;
    border: 0;
}
body, html {
    color: #373C40;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    height: 100%;
    background-color: #f0f0f0;
    margin:10px;
}
body {
    font-size: 70%;
}
p {
    padding: 7px 0 7px 0;
    font-weight: 500;
    font-size: 10pt;
}
a {
    color: #656565;
    text-decoration:none;
}
a:hover{
    color: #4C99CC;
    text-decoration: none;
}
h1 {
    font-weight:200;
    color: #888888;
    font-size:16pt;
    padding-left:33px;
    margin:8px ;
}
.clear{
 width:100%;
 float:none;
 clear:both;
}
form.register{
    width:800px;
    margin: 20px auto 0px auto;
    background-color:#fff;
    padding:5px;
}
form p{
    font-size: 8pt;
    clear:both;
    margin: 0;
    color:gray;
    padding:4px;
}
fieldset.row1{
    width:100%;
    padding:5px;
    float:left;
    border-top:1px solid #F5F5F5;
    margin-bottom:15px;
}
fieldset.row2{
    border-top:1px solid #F1F1F1;
    border-right:1px solid #F1F1F1;
    padding:5px;
    float:left;
 min-height:220px;
}
fieldset.row3{
 border-top: 1px solid #F1F1F1;
 padding: 5px;
 float: left;
 margin-bottom: 15px;
 width: 159px;
 
}
fieldset.row4,fieldset.row5{
    border-top:1px solid #F1F1F1;
    border-right:1px solid #F1F1F1;
    padding:5px;
    float:left;
    clear:both;
}
fieldset.row5{
 width:100%;
}

.register .form label{
    float: left;
    text-align: left;
    margin-right: 5px;
    margin-top:2px;
    width:auto;
}
.register .form input{
 width:100px;
}
.form td{
 border-right:1px solid #F1F1F1;
 border-top:1px solid #F1F1F1;
 border-bottom:1px solid #F1F1F1;
 border-left:0px solid #F1F1F1;
 padding:2px;
 margin:0;
}
.register legend{
    color: #4C99CC;
    padding:2px;
    margin-left: 14px;
    font-weight:bold;
    font-size: 14px;
    font-weight:100;
}
.register label{
    color:#444;
    width:100px;
    float: left;
    text-align: right;
    margin-right: 6px;
    margin-top:2px;
}
form.register label.optional{
    float: left;
    text-align: right;
    margin-right: 6px;
    margin-top:2px;
    color: #A3A3A3;
}
form.register label.obinfo{
    float:right;
    padding:3px;
    font-style:italic;
}
form.register input{
    width: 140px;
    color: #505050;
    float: left;
    margin-right: 5px;
}
form.register input.long{
    width: 247px;
    color: #505050;
}
form.register input.short{
    width: 40px;
    color: #505050;
}
form.register input[type=radio]{
    float:left;
    width:15px;
}
form.register label.gender{
    margin-top:-1px;
    margin-bottom:2px;
    width:34px;
    float:left;
    text-align:left;
    line-height:19px;
}
form.register input[type=text]{
    border: 1px solid #E1E1E1;
    height: 18px;
}
form.register input[type=password]{
    border: 1px solid #E1E1E1;
    height: 18px;
}

form.register input[type=button]:hover{
 cursor:pointer;
 background:#ccc;
}
form.register  .submit{
    color: #fff;
    cursor: pointer;
    float:left;
    margin:10px;
 padding:5px;
 background: #4C99CC;
 background-image: linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
 background-image: -o-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
 background-image: -moz-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
 background-image: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
 background-image: -ms-linear-gradient(bottom,rgba(0, 0, 0, 0.1) 0,rgba(255, 255, 255, 0.1) 100%);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0, 0, 0, 0.1)),color-stop(1,rgba(255, 255, 255, 0.1)));

}
form.register  .submit:hover{
 background:#505050;

}
form.register  .submit:active{
 background:#ccc;
  color: #000;
}
form.register input[type=text].small{
    border: 1px solid #E1E1E1;
    height: 18px;
    width:75px;
}
form.register input[type=checkbox] {
    width:34px;
    margin-top:4px;
}
form.register select{
    border: 1px solid #E1E1E1;
    float:left;
    margin-bottom:3px;
    color: #505050;
    margin-right:5px;
}
input:focus, select:focus{
    background-color: #F1F1F1;
}
p.info{
    font-size:7pt;
    color: gray;
}
p.agreement{
    margin-left:15px;
}
p.agreement label{
    width:390px;
    text-align:left;
    margin-top:3px;
}

<form class="register" method="post" action="">
  <p> 
   <input type="button" class="add_" value="Add Fields"  /> 
   <input type="button" class="add_" value="Remove All Added Fields" onClick="deleteRow('dataTable')"  /> <!-- onClick="addRow('dataTable')"  deleteRow('dataTable') -->

  </p> 
    <table id="dataTable" class="form" border="1">
    <tbody>
   <tr>
     <p>
    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
    <td>
     <label>Chapter</label>
     <input type="text" required="required" name="BX_NAME[]">
     </td>
     <td>
     <label for="BX_date">Date</label>
     <input type="text" required="required" class="small datepicker"  name="BX_date[]" id="datepicker">
     </td>
     <td>
     <label for="BX_gender">Gender</label>
     <select id="BX_gender" name="BX_gender" required="required">
      <option>....</option>
      <option>Male</option>
      <option>Female</option>
     </select>
     </td>
     </p>
   </tr>
   </tbody>
  </table>
  <input type="submit" value="Save" class="submit" /> 
 </form>

已解决

通过在用户添加行时重新排序代码行解决。

    $(".datepicker").datepicker("destroy");
    addRow('dataTable');
    $( ".datepicker" ).datepicker({ dateFormat: 'dd-mm-yy' } );

新刊

我现在面临的新问题是，无论我从哪个输入框添加日期，它都只将日期添加到第一个输入。

可能有什么解决方案？

Answer 1

对于动态添加的日期选择器，最好的方法是这样做

$('body').on('focus', '.datepicker', function(){
   $(this).datepicker({ dateFormat: 'dd-mm-yy' } );
}).on('click', '.datepicker', function(){
   $(this).datepicker({ dateFormat: 'dd-mm-yy' } );
});

此外，您对多个输入使用相同的 id。

这是一个demo

希望对您有所帮助。

jQuery DatePicker：多个输入给出错误

jQuery DatePicker : Multiple input giving an error

javascript

jquery

jquery-ui

datepicker