解决表格中批量绑定jQuery UI Datepicker仅首个输入框生效的问题

我来帮你搞定这个动态绑定Datepicker的问题，你的代码里踩了几个常见的坑，咱们一步步拆解修复：

问题根源分析 #

1. jQuery版本冲突：你同时引入了jQuery 3.6.0和1.12.4，这会导致全局$对象被覆盖，很多jQuery相关功能会悄悄失效，而且不会报错，非常难排查。
2. 循环变量与闭包陷阱：用var声明的循环变量i存在变量提升问题，嵌套的$(function())里拿到的i最后都是循环结束的数值；而且你还硬编码了#datepicker0，根本没用到循环的i，自然只有第一个输入框能生效。
3. 低效的绑定方式：没必要通过循环逐个绑定ID，用类选择器或者事件委托会更简洁可靠。

修复后的完整代码 #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Dynamic Binding</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 只保留一个jQuery版本，解决冲突 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="date-table-wrapper">
<table id="date-table">
<tbody>
<!-- filled by script -->
</tbody>
</table>
</div>
<script>
const tableDate = document.getElementById("date-table")
// 用let声明循环变量，避免块级作用域污染
for (let i = 0; i < 5; i++) {
 const tableDateRow = `<tr id="row-${i}">
 <td id="reason-${i}" contenteditable='true'>Something ${i}</td>
 <td id="date${i}"><input type="text" class="datepicker-input"></td>
 </tr>`
 tableDate.innerHTML += tableDateRow
}

$(function () {
 // 方案1：直接通过类选择器一次性绑定所有日期输入框
 $(".datepicker-input").datepicker();

 // 方案2：如果需要点击最后一列单元格才弹出Datepicker（而非点击输入框），用事件委托
 // $("#date-table").on("click", "td:last-child", function() {
 //   const $input = $(this).find(".datepicker-input");
 //   $input.datepicker("show");
 // });
})
</script>
</body>
</html>

关键改进点说明 #

• 清理重复依赖：删掉了重复的jQuery 1.12.4，只保留3.6.0，确保jQuery和jQuery UI能正常协作。
• 块级作用域变量：用let代替var声明循环变量，每个循环迭代的i都是独立的，避免闭包陷阱。
• 统一类选择器：给所有日期输入框加上datepicker-input类，一行代码就能完成所有绑定，比动态ID更易维护。
• 可选的事件委托：如果你的需求是点击单元格才弹出Datepicker，事件委托能完美适配动态生成的DOM元素，后续新增行也能自动生效。

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