在动态生成的输入上显示 jquery datepicker答案

【问题标题】：Show jquery datepicker on dynamically generated input在动态生成的输入上显示 jquery datepicker
【发布时间】：2015-07-18 12:52:02
【问题描述】：

我有一个使用来自 github 的 Bootstrap3-dialog 的 HTML 页面：

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

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

你能帮我弄清楚我的代码有什么问题吗？

谢谢。

	$(function() {
	  $("body").on("focus", "#date", function() {
	    console.log("Supposed to show the datepicker"); //This is working so the datepicker should work too.
	    $('#date').datepicker();
	    $('#date').datepicker('show');
	  });
	  $("body").on("click", "#modal", function() {
	    BootstrapDialog.show({
	      message: '<div class="input-group"><span class="input-group-addon"><strong>Schedule date</strong></span><input value="" type="text" id="date" class="form-control">',
	      buttons: [{
	        icon: 'glyphicon glyphicon-send',
	        label: 'Save changes',
	        cssClass: 'btn-primary',
	        autospin: true,
	        action: function(dialogRef) {
	          dialogRef.enableButtons(false);
	          dialogRef.setClosable(false);
	          dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
	          setTimeout(function() {
	            dialogRef.close();
	          }, 5000);
	        }
	      }, {
	        label: 'Close',
	        action: function(dialogRef) {
	          dialogRef.close();
	        }
	      }]
	    });
	  });
	});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/css/bootstrap-dialog.css">
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
</script>

<body>
  <button type="button" id="modal" class="btn btn-primary">Show Modal</button>
</body>

【问题讨论】：

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

日期选择器隐藏在模态的覆盖层后面。您需要设置更高的z-index 才能显示。

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

【讨论】：

没错，很好，但是为什么 2000 作为 z-index 的值？并且使用 2000 是否适用于所有浏览器？
控制台日志消息也会在输入焦点上显示两次
@oussamakamal 模态叠加层有z-index: 1050;，您可以尝试使用较低的值。 focus 事件触发了两次，但我不确定具体原因。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你厌倦了这个：

  $("#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');
    });

【讨论】：