Bootstrap Datepicker无法显示求助：动态生成输入框无弹窗（兼容Safari）

我来帮你搞定这个动态生成日期选择器的问题，这是前端开发里很常见的DOM绑定坑：

问题根源 #

你页面加载时执行的$(function(){ $('.datepicker').datepicker(...) })只会给页面初始化时已经存在的.datepicker元素绑定日期选择器。但你通过myFunction动态生成的输入框是后续才添加到DOM中的，这些新元素并没有被初始化datepicker，所以点击后自然没反应。

另外你的代码里还有个小语法错误：<div class="col-md-3" class="title">重复了class属性，应该合并成<div class="col-md-3 title">，我下面会帮你修正。

解决方案一：动态创建后立即初始化（推荐） #

在循环创建输入框并添加到页面后，立刻针对新生成的元素初始化datepicker，这样每个动态生成的输入框都会被正确绑定：

function myFunction(){ 
  var n = Number(document.getElementById("nbchambre").value); 
  var content = document.getElementById('content'); 
  content.innerHTML=""; 
  for(var count = 1; count < n+1; count++){ 
    var div = document.createElement('div'); 
    // 修正重复的class属性
    div.innerHTML = '<div class="col-md-3 title">Car ' + count + ' : </div>'+'<div class="col-md-3"> <input class="datepicker text centered valid" type="text" value="" name="date" id="car' + count + '" required> </div>';
    content.appendChild(div);
    // 初始化当前循环生成的datepicker元素
    $(div).find('.datepicker').datepicker({ format: 'mm-dd-yyyy' });
  } 
}

解决方案二：使用事件委托 #

如果你不想在创建元素时逐个初始化，也可以用jQuery的事件委托，监听父容器内所有.datepicker元素的焦点事件，触发初始化：

替换掉原来的datepicker初始化代码：

$(function(){
  // 委托父容器#content监听子元素的focus事件
  $('#content').on('focus', '.datepicker', function() {
    // 初始化并显示日期选择器
    $(this).datepicker({ format: 'mm-dd-yyyy' }).datepicker('show');
  });
});

额外检查点 #

还要确认这几个关键环节有没有问题：

• 页面引入顺序是否正确：必须先引入jQuery，再引入Bootstrap JS，最后引入bootstrap-datepicker.js，依赖关系不能乱。
• 打开浏览器控制台（F12）看看有没有404错误，确认datepicker.css和bootstrap-datepicker.js的文件路径是正确的。

内容的提问来源于stack exchange，提问作者MuaathAli