为何通过jQuery修改input值后.change()事件未触发，仅手动修改才生效？

这是个非常常见的小坑！我自己开发的时候也踩过好几次😎，其实原因很简单：

浏览器的change事件默认只对用户的手动交互操作生效——比如你点击输入框手动修改内容、选择下拉选项后点击别处，这种用户主动的操作才会触发change。而通过jQuery的.val()或者原生JS直接修改input的value属性，属于脚本层面的修改，浏览器不会自动帮你触发change事件。

解决方案：手动触发change事件 #

最直接的办法就是在修改值之后，主动调用触发事件的方法：

方法1：修改值后链式调用.trigger('change') #

这是最常用的方式，代码简洁直观：

// 示例：修改.pricing的value并触发change事件
$('.pricing').val('199.99').trigger('change');

方法2：用.change()简写形式 #

.change()其实是.trigger('change')的语法糖，效果完全一样：

$('.pricing').val('299.99').change();

方法3：封装成复用函数（适合频繁修改的场景） #

如果你的业务里需要多次通过脚本修改这个输入框的值，可以把逻辑封装成函数，避免重复代码：

function updatePricing(newValue) {
  $('.pricing').val(newValue).trigger('change');
}

// 调用示例
updatePricing('399.99');

补充：原生JS的触发方式 #

如果项目里有用到原生JS的场景，也可以用dispatchEvent来触发事件：

const pricingInput = document.querySelector('.pricing');
pricingInput.value = '499.99';
pricingInput.dispatchEvent(new Event('change'));

额外提醒：区分change和input事件 #

如果你的需求是值一变化就触发逻辑（比如用户输入每一个字符时都响应），那可以考虑绑定input事件而不是change——input事件会在值修改时立即触发，不管是用户手动输入还是脚本修改（不过脚本修改时依然需要手动触发，和change一样），而change是在输入框失去焦点且值有变化时才触发。

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