jQuery trigger('input')无法触发原生JavaScript input事件如何解决

根本原因 #

jQuery 的 trigger() 方法默认仅触发自身维护的事件回调队列，仅对通过 jQuery .on() 绑定、以及元素 oninput 内联属性绑定的监听器生效，不会派发标准原生 DOM 事件，因此原生 addEventListener 注册的监听器无法捕获。

解决方法 #

把触发逻辑改成手动派发原生Input事件即可，不需要调整原有监听器的注册逻辑，修改后的完整代码如下：

input.on('apply.daterangepicker', function(e) {
    // 获取input对应的原生DOM对象
    const nativeInputEl = input.get(0);
    // 构造原生input事件，开启冒泡适配事件委托场景
    const nativeInputEvent = new InputEvent('input', {
        bubbles: true,
        cancelable: true
    });
    // 派发原生事件
    nativeInputEl.dispatchEvent(nativeInputEvent);
});

input.on('input', function(e) {
    console.log('11111111111111111111');
});

document.getElementById('filter-created-at').addEventListener('input', function(e) {
    console.log('22222222222222222222');
});

修改后jQuery绑定、原生绑定的两个input监听器都会正常触发，兼容所有现代浏览器。

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