我试图创建一个动态表单。我不知道为什么不能点击日期选择器。 Datepicker仅适用于第一行。我已经尝试了很少的其他代码，但没有运气。代码如下。我排除了PHP代码，因为它只包含插入数据库的代码。我的目标是将动态表单存储到数据库中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
});
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls .d1:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="fa fa-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<form method="POST" action="" name="loginin">
<div class="controls">
<div class="d1">
<div class="entry input-group">
<input list="pronama" name="proPlace[]" type="text" placeholder="Place" class="form-control">
<input type="text" class="datepicker" class="form-control" name="date[]">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</div>
</div>
<button type="submit" name="login" class="btn btn-lg btn-success btn-block">Sign In</button>
</form>
</body>
</html>
您需要在每次创建时初始化datepicker，如下所示：
newEntry.removeAttr('id');
$(".datepicker", newEntry)
.removeAttr('id')
.removeClass('datepicker hasDatepicker')
.datepicker({
dateFormat: 'dd-mm-yy'
});
使新条目的输入成为日期选择器，需要删除hasDatepicker类才能使其工作，因为您克隆了输入，该类也在克隆元素中。
这是一个jsfiddle：adding dynamic datepickers
编辑：更新了提琴手，原因只有第一个输入在选择日期时更新，是因为它是一个克隆元素，包含与原始相同的ID，因此在查找日期选择器的ID时，它会偶然发现它。
修复程序在这里描述。 Datepicker selected value always goes on the first textbox