type=time输入框事件绑定问题：仅修改小时时事件不触发

我明白你遇到的困扰了——原生type="time"输入框在只修改小时（或只修改分钟）时，之前绑定的事件不会触发，只有同时改完小时和分钟才会执行函数，这确实挺闹心的。

这里给你两个关键修改点，能彻底解决这个问题：

1. 替换事件类型为input #

input事件会在输入框的每一次值变化时立刻触发，不管你是单独调整小时、单独修改分钟，还是用控件的上下箭头、鼠标点击来调整时间，都会马上响应。

2. 把one()换成on()（可选但推荐） #

如果你希望每次修改时间都触发函数，而不是只触发一次，那one()就不合适了——它只会绑定一次事件，触发后就失效了。换成on()才能持续响应每一次的时间修改操作。

修改后的JS代码如下：

$('#start, #end').on('input', function() {
  console.log($(this));
  var start = $('#start').val();
  console.log('当前开始时间：', start);
  var end = $('#end').val();
  console.log('当前结束时间：', end);
  
  // 这里可以加入计算时长的逻辑，比如根据start和end自动填充duration的值
});

为什么原来的写法会失效？ #

• change事件：原生time输入框的change事件只有当控件失去焦点，或者用户完成了完整的时间输入（比如同时选好小时和分钟）才会触发，单独修改小时/分钟时不会触发。
• keyup事件：当用户用原生控件的上下箭头或鼠标点击调整时间时，并不会触发keyup，只有直接用键盘输入数字时才会生效，覆盖的场景不全。
• one()：这个方法只会让事件触发一次，之后再修改时间就不会执行函数了，完全不符合实时响应的需求。

这样修改后，不管你用哪种方式调整时间，函数都会立刻触发，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Björn C