如何获取动态添加的Bootstrap日期选择器的值？

刚踩过和你一模一样的坑！在带静态行和动态行的contenteditable表格里，用jQuery拿deposit字段值没问题，但动态加的Bootstrap日期选择器只能取到第一个静态的那个值，后来靠嵌套类名+全局筛选/事件委托的方案解决了，分享给你：

问题根源 #

页面加载完成后，普通的jQuery选择器只会识别初始化时就存在的DOM元素——也就是表格里的静态行日期选择器。动态生成的行是后续才插入DOM的，自然不会被普通选择器捕捉到。

解决方法：嵌套类名定位 #

给你的表格（或者所有行的父容器）加一个固定类名，比如editable-deposit-table，然后通过父容器类名 + 日期选择器类名的嵌套选择器来获取所有日期选择器的值，不管是静态还是动态生成的：

1. 获取所有日期选择器的值

// 遍历所有日期选择器（包括动态添加的）
$('.editable-deposit-table .bootstrap-datepicker').each(function() {
  var currentDate = $(this).val();
  // 这里处理每个日期的值，比如存入数组或者进行其他操作
  console.log("选中日期：", currentDate);
});

2. 绑定日期选择器的change事件（针对动态元素）

如果需要监听日期选择变化，一定要用事件委托，把事件绑定到固定存在的父容器上：

// 父容器委托事件给所有日期选择器
$('.editable-deposit-table').on('change', '.bootstrap-datepicker', function() {
  var selectedDate = $(this).val();
  console.log("当前选中的动态日期：", selectedDate);
});

为什么嵌套类名管用？ #

因为父容器是页面初始化就存在的DOM元素，通过它来筛选子元素时，jQuery会实时扫描该容器下的所有匹配元素——包括后续动态插入的日期选择器，这样就不会漏掉任何一个啦。

内容的提问来源于stack exchange，提问作者D.Neligan