点击表格行设置time输入框值仅首行生效问题排查

你的代码逻辑本身能触发每行的点击事件（alert正常就是证明），问题出在几个细节和潜在隐患上，以下是修正方案和排查点：

修正后的代码 #

$(document).ready(function() {
  // 替换delegate为on，这是jQuery官方推荐的事件委托写法，兼容性和稳定性更好
  $("#example_table").on("click", "tr", function() {
    const d = new Date();
    // 用padStart简化补零逻辑，代码更简洁易读
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const currentTime = `${hours}:${minutes}`;

    $("#start").val(currentTime);
  });
});

问题原因&排查点 #

1. 事件委托方法的稳定性：delegate是jQuery 1.7之前的旧方法，在处理动态生成的表格行或复杂DOM结构时，容易出现绑定不稳定的情况，换成on即可解决这类问题。
2. 全局变量隐患：你之前的now变量未用var/let/const声明，会自动成为全局变量，虽然这不是当前问题的直接原因，但可能引发其他意外行为，建议始终显式声明变量。
3. 重复ID问题：检查页面中是否存在多个id="start"的元素？HTML规范要求id必须唯一，若有重复，$("#start")只会选中第一个匹配的元素，这会导致后续行点击时虽然执行了代码，但修改的是同一个输入框，看起来像是没生效。
4. 事件冒泡被阻止：如果表格行内有子元素（比如按钮、输入框）添加了event.stopPropagation()，会阻止事件冒泡到父级的tr，导致委托事件无法触发。可以检查行内元素的事件代码，移除不必要的阻止冒泡逻辑。

内容的提问来源于stack exchange，提问作者Maeru Bagas Trisoko