使用jQuery时span标签导致input的change事件无法触发是什么原因

核心诱因：第三方日期选择插件的事件劫持 #

你外层的div带有date类，搭配内部的日历图标span，会被页面引入的第三方日期选择组件（比如Bootstrap Datepicker、Tempus Dominus等）自动识别为需要接管的日期选择器组件，这是导致原生change事件失效的根本原因：

• 存在日历span标签时，插件会完成完整的组件初始化逻辑，主动劫持input的原生事件，部分插件还会调用event.stopImmediatePropagation()阻止你绑定的原生监听回调执行
• 移除span标签后，插件判定该容器不符合可接管的日期选择器结构，不会进行初始化和事件劫持，原生change事件自然可以正常触发

次要可能：插件赋值未触发原生事件 #

如果你的值是通过点击日历弹窗选择填充的，大部分日期插件通过JS直接修改input的value属性时，不会主动派发原生的change事件，也会导致你绑定的监听无法触发。

• 优先使用对应日期插件提供的自定义事件完成回调逻辑，比如Bootstrap Datepicker的changeDate事件示例：

// 以Bootstrap Datepicker为例
$('#casting_date_naissance').datepicker().on('changeDate', function(evt) {
  alert('a');
  console.log(this);
});

• 如果你不需要使用第三方日期选择功能，直接移除外层div的date类即可解除事件劫持，原生change事件会恢复正常
• 如果你要坚持监听原生change事件，可以在插件初始化完成后重新绑定监听，或者手动监听input事件作为替代

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