jQuery .trigger()跨两个独立JS文件触发后无法被捕获是什么原因？

核心结论 #

jQuery的.trigger()与.triggerHandler()原生支持跨独立JavaScript文件工作，事件绑定依赖共享的DOM对象（你这里用的是全局document对象），和代码归属的文件没有关联，你遇到的不生效问题本质是代码执行顺序错误导致的。

问题根因分析 #

• 文件加载/执行顺序错误
  你大概率是先加载timeline.js、后加载catch.js，导致scrub事件的监听逻辑注册晚于事件触发时机：事件触发时还没有对应的监听函数，自然收不到回调。
  你提到的「同文件写法可以生效」属于巧合：你把事件绑定逻辑写在了scrubbingToTime函数内部，第一次调用该函数时，先执行.trigger()（此时无监听，无日志），再执行.on()注册监听；第二次调用该函数时，已经存在已注册的监听，才能收到回调打印日志，同时还会重复注册一次监听，后续每调用一次函数就会多一个重复监听，触发时会多次打印日志，属于错误写法。
• 监听代码未在DOM就绪状态下执行
  如果你的catch.js在DOM解析完成、jQuery加载完成之前就执行了，$(document).on()会执行失败，无法成功注册监听。
• 多jQuery实例冲突（概率较低）
  如果项目中引入了多次jQuery，或者调用了$.noConflict()释放了$变量，可能导致两个文件中操作的$(document)不属于同一个jQuery实例，事件无法互通。

修复方案 #

1. 调整文件加载顺序，保证先加载注册监听的catch.js，再加载包含触发逻辑的timeline.js，确保事件先注册、后触发。
2. 所有事件绑定逻辑包裹在DOM Ready回调中，确保执行时jQuery和DOM对象都已就绪：
   catch.js调整为：

// 等价于$(document).ready(function() { ... })
$(function() {
  $(document).on("scrub", function(e, pos) {
    console.log("Time Changed!", pos);
  });
});

timeline.js保持逻辑，移除函数内部的事件绑定代码即可：

function scrubbingToTime(position) {
  $(document).trigger("scrub", [position]);
}

3. 检查项目中是否存在多jQuery实例加载、event.stopPropagation()阻止事件冒泡的相关代码，排除冲突。

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