我正在使用jQuery DatePicker插件。
功能
目前我正在处理一个有表的表单，并允许用户通过单击按钮将行添加到该表中。工作得很好。
现在我想实现DatePicker插件，以便用户只需点击即可添加日期。
问题
目前我遇到的问题是，当用户添加行时，datepicker停止工作。我正在使用类，因此它不应该产生问题。 我试过的是在用户添加新行时销毁datepicker实例，但这样做会给我一个错误
未捕获的TypeError：无法读取未定义的属性'append'
我在谷歌上试过，但没有一个与我的错误相关。
有人可以帮助我吗？
( 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' } );
新问题
我现在面临的新问题是，无论从哪个输入框添加日期，它都只将日期添加到第一个输入。
这可能是什么解决方案？
答案 0 :(得分：1)
对于动态添加的datepickers，最好的方法就是这样做
$('body').on('focus', '.datepicker', function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' } );
}).on('click', '.datepicker', function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' } );
});
此外，您对多个输入使用相同的id。
这是demo
希望这有帮助。