Javascript 在动态生成的输入上显示jquery日期选择器

我有一个HTML页面，它使用github中的Bootstrap3对话框：

该页面有一个按钮，当您单击它时，会显示一个带有输入的表单，我想向该输入添加一个日期选择器，但是它是动态生成的，并且单击输入不会显示日期选择器

从下面的代码中，您可以看到“console.log（）”消息在输入具有焦点时显示，因此日期选择器应该正常显示

你能帮我找出我的代码有什么问题吗

谢谢

$（函数（）{
$（“body”）。关于（“焦点”，“日期”，函数（）{
console.log（“应该显示日期选择器”）；//这正在工作，因此日期选择器也应该工作。
$（'#date'）.datepicker（）；
$（“#date”）.datepicker（'show'）；
});
$（“body”）。在（“单击”，“模态”，函数（）上）{
BootstrapDialog.show({
消息：“计划日期”，
按钮：[{
图标：“glyphicon glyphicon发送”，
标签：“保存更改”，
cssClass:'btn primary'，
自动旋转：对，
操作：函数（dialogRef）{
dialogRef.enableButtons（假）；
dialogRef.setClosable（false）；
dialogRef.getModalBody（）.html（'对话框在5秒内关闭'）；
setTimeout（函数（）{
dialogRef.close（）；
}, 5000);
}
}, {
标签：“关闭”，
操作：函数（dialogRef）{
dialogRef.close（）；
}
}]
});
});
});

显示模态
您是否厌倦了以下内容：

  $("#date").on("click", function(){
        console.log("Supposed to show the datepicker");//This is working so the datepicker should work too.
        $('#date').datepicker();
        $('#date').datepicker('show');
    });

日期选择器隐藏在modal的覆盖之后。您需要设置一个更高的
z索引
，它才会出现

.ui-datepicker {
  z-index: 2000; 
}

在动态显示任何模式时初始化日期选择器：

$(document).on('shown.bs.modal', function() {
    $('.datetimepicker').datetimepicker();
});

这是正确的，好的捕获然而为什么2000作为z指数的值？使用2000是否可以在所有浏览器上运行？控制台日志消息在输入端显示两次focus@oussamakamal模态叠加具有
z指数：1050，可以尝试使用较低的值。
focus
事件触发了两次，但我不确定确切原因。