我的datetimepicker在附加html表后停止工作时出现此问题。
我有一个打开对话框的按钮。这包含要输入的字段,单击“保存”时,它会将值作为记录添加到html表中。 这很好,但是,再次打开对话框时,datetimepicker按钮不再起作用。
对话框表单有多个datetimepickers,但是,我简化了一个问题的示例。
请参阅下面的jsfiddle以获取示例。
$(".datepicker").datepicker({
dateFormat: "yy-mm-dd", timeFormat: "HH:mm", hourMin: 0, hourMax: 24, stepMinute: 10
});
var dialog;
dialog = $("#addnewDialog").dialog({
autoOpen: false,
height: 250,
width: 350,
modal: true,
buttons: {
"Save": addnewrec,
Cancel: function () {
dialog.dialog("close");
}
},
open : function() {
},
close: function () {
}
});
$("#AddNew").button().on("click", function () {
dialog.dialog("open");
});
function addnewrec() {
var valid = true;
var dealerref = $('#tblInput').find('#DealerRef').val();
var dtCreated = $('#tblInput').find('#DTCreated').val();
if (valid) {
var td1 = '<td id=DealerRef>' + dealerref + '</td>';
var td2 = '<td id=DTCreated>' + dtCreated + '</td>';
$("#tblStyle tbody").append("<tr><td></td>" +
td1 + td2 + "</tr>");
dialog.dialog("close");
}
return valid;
}
答案 0 :(得分:2)
这是因为您在表td
中生成了与您的日期选择工具ID相同的ID,所以它首次运行后将td附加到表中,选择开启timepicker会因重复的id项目而引发错误
另外要知道,在HTML页面中,您应始终使用ID作为一个而且只使用一个元素,否则使用类。
您可以通过增加生成引擎时间选择器ID或生成td's
的其他ID来解决此问题,例如:
请参阅此Fiddle
摘录:
$(function () {
$(".datepicker").datepicker({
dateFormat: "yy-mm-dd", timeFormat: "HH:mm", hourMin: 0, hourMax: 24, stepMinute: 10
});
var increment = 0;
var dialog;
dialog = $("#addnewDialog").dialog({
autoOpen: false,
height: 250,
width: 350,
modal: true,
buttons: {
"Save": addnewrec,
Cancel: function () {
dialog.dialog("close");
}
},
open : function() {
},
close: function () {
}
});
$("#AddNew").button().on("click", function () {
dialog.dialog("open");
});
function addnewrec() {
var valid = true;
var dealerref = $('#tblInput').find('#DealerRef').val();
var dtCreated = $('#tblInput').find('#DTCreated').val();
if (valid) {
increment++;
var td1 = '<td id=DealerRef'+increment+'>' + dealerref + '</td>';
var td2 = '<td id=DTCreated'+increment+'>' + dtCreated + '</td>';
$("#tblStyle tbody").append("<tr><td></td>" +
td1 + td2 + "</tr>");
dialog.dialog("close");
}
return valid;
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input id="AddNew" type="button" value="Add New Activity" class="btn btn-default" />
<br /><br />
<div id="addnewDialog" title="Add New Activity">
<table id="tblInput">
<tbody>
<tr>
<td>
DealerRef
</td>
<td>
<input id="DealerRef" name="DealerRef" type="text" value="">
</td>
</tr>
<tr>
<td>
DTCreated
</td>
<td>
<input class="datepicker" id="DTCreated" name="DTCreated" type="text" value="">
</td>
</tr>
</tbody>
</table>
</div>
<table id="tblStyle">
<thead>
<tr>
<th>DealerRef</th>
<th>DTCreated</th>
</tr>
</thead>
<tbody></tbody>
</table>
&#13;