[英]Bootstrap Datetimepicker not working in collapse
我在bootsrap折叠javascript组件内使用bootstrap3链接的datetimepickers。 问题是datetimepicker没有显示。 我不确定是什么引起了该问题,因为我尝试了z-index,正如许多其他人所推荐的那样,但它并没有解决我的问题。
这是我的脚本代码。 我对jQuery不太熟悉,但是我编写了这段代码来将可折叠视图动态添加到表单中
<script>
var id = 0;
function example_append() {
id++;
$(".newTicket").prepend("<li>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Name'/>" + "</div>" +
"<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Quantity'/>" + "</div>" +
"<div class='col-md-2'>" + "<input type='text' class='form-cantrol' placeholder='Price'/>" + "</div>" +
"<div class='col-md-2'>" + "<a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'><img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"<div class='col-md-2'>" + "<a href='javascript:void(0);' class='remove'><img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" +
"</li>" +
"<div class='collapse' id='" + id + "'>" +
"<div class='well'>" +
"<label>Description</label>" + "<input type='text' class='form-cantrol' placeholder='Enter a Description'/>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker3'>Sales Start</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker3'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<div class='row'>"+
"<div class='col-md-2'>"+
"<label for='datetimepicker4'>Sales End</label>"+
"</div>"+
"<div class='col-md-5'>"+
"<div class='input-group date' id='datetimepicker4'>"+
"<input type='text' class='form-cantrol' />"+
"<span class='input-group-addon'>"+
"<span class='glyphicon glyphicon-calendar'></span>"+
"</span>"+
"</div>"+
"</div>"+
"</div>" +
"</div>" +
"<label>Minimum to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter the minimum'/>" +
"<label>Maximun to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter that maximum'/>" +
"</div>" +
"</div>");
}
$(document).on("click", "input-group-addon", function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
$(document).on("click", "a.remove", function () {
$(this).closest('li').remove();
});
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker();
$('#datetimepicker4').datetimepicker();
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
</script>
也许问题是onclick从未触发。
更改
$(document).on("click", "input-group-addon", function () {
至
$(document).on("click", ".input-group-addon", function () {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.