【发布时间】：2022-02-02 07:25:40
【问题描述】：
我无法让 datetimepicker 在以下情况下完全加载： 它将元素添加到页面，但单击日历图标的功能不像第一组那样。 我是网页建设新手，要温柔
这里是 jsfiddle：https://jsfiddle.net/gq8a7k14/
前 2 个日期时间选择器工作正常，当您单击添加按钮时，会添加一个新集合，但它们不起作用。
<?php
?>
<html>
<head>
<title>SubmitYourTime</title>
<link href='assets/css/phppot-style.css' type='text/css' rel='stylesheet' />
<link rel='stylesheet' type='text/css'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<style type='text/css'>
.container {
margin-top: 40px;
}
.btn-primary {
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('#datetimepicker0s').datetimepicker();
$('#datetimepicker0e').datetimepicker();
$('.add').on('click', add);
$('.remove').on('click', remove);
});
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
</head>
<body>
<div class='container'>
<div class='panel panel-primary'>
<div class='panel-heading'>Enter Your Time</div>
<div class='panel-body'>
<div id='new_chq'>
<div class='row'>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>Start Time</label>
<div class='input-group date' name='dtp0s' id='datetimepicker0s'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>End Time</label>
<div class='input-group date' name='dtp0e' id='datetimepicker0e'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='hidden' value='1' id='total_chq'>
<button class='add'>Add Time</button>
<br></br>
<input type='submit' class='btn btn-primary' value='Submit'>
</div>
</div>
</body>
</html>
【问题讨论】：
-
为什么要动态添加日期时间选择器？据我所知，这是不可能的，因为它们一开始就被初始化过，以后无法添加，但我可能错了。
-
您需要将事件绑定到 DOM 中的静态父项。请参阅此 jQuery 委托问题stackoverflow.com/q/14164296/2030565
标签： javascript html jquery datetimepicker