jQuery无法监听到JS修改input值触发的change事件如何解决

通过JS直接修改input元素的value属性时，不会自动触发原生的change/input事件，只有用户手动交互输入、修改值时才会触发这类事件，这是浏览器的默认行为。

方案1：劫持value属性setter（优先推荐） #

这种方案实时触发无额外性能损耗，只要给目标input的value属性重写setter逻辑，每次JS赋值后主动触发change事件即可，你原来的事件监听代码不需要修改：

const targetInput = document.getElementById('generation_id_display');
// 保存input原生value属性的描述符
const originalValueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');

Object.defineProperty(targetInput, 'value', {
  get: function() {
    return originalValueProp.get.call(this);
  },
  set: function(newVal) {
    // 先执行原生赋值逻辑
    originalValueProp.set.call(this, newVal);
    // 手动触发change事件，原有绑定的监听逻辑会正常执行
    this.dispatchEvent(new Event('change'));
  },
  configurable: true,
  enumerable: true
});

不管原有逻辑是用原生JS还是jQuery给input赋值，该方案都能正常捕获到变更。

方案2：轮询对比值（兜底兼容方案） #

如果遇到特殊场景属性劫持不生效，可以用定时轮询的方式对比input的当前值和上一次缓存值，发生变更时执行对应逻辑，不会和其他逻辑冲突：

// 初始化缓存初始值
let lastValue = $('#generation_id_display').val();
// 每300ms检查一次值变化，间隔可根据需求调整
setInterval(() => {
  const currentValue = $('#generation_id_display').val();
  if (currentValue !== lastValue) {
    lastValue = currentValue;
    // 直接执行你原来的change逻辑即可
    console.log('change');
    $('.quote_row input').prop('disabled', false);
  }
}, 300);

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