jQuery自定义事件在$(document).ready()中注册后无法触发问题

嘿，这种自定义事件绑了却触发不了的情况我之前也踩过坑，结合你已经排查的点，给你几个更具体的方向去试试：

1. 先核对事件触发的姿势对不对 #

自定义事件不像click这种内置事件有浏览器自动触发的逻辑，必须手动触发。如果用jQuery绑定的，记得用trigger()（或者原生触发要配置对参数）：

• 正确的jQuery触发示例：

// 绑定
$('#target').on('myCustomEvent', function() { 
  console.log('自定义事件触发'); 
});
// 触发
$('#target').trigger('myCustomEvent');

• 如果用原生dispatchEvent触发，要是是委托绑定的场景，一定要开启冒泡：

const event = new CustomEvent('myCustomEvent', { bubbles: true });
document.querySelector('#target').dispatchEvent(event);

要是漏了bubbles: true，委托绑定的自定义事件根本传不到上层元素。

2. 检查事件名的细节有没有错 #

别小看拼写！比如绑定的是my-custom-event，触发的时候写成myCustomEvent，或者加了命名空间（比如myEvent.myNS）但触发的时候只写了myEvent，都会导致触发失败。建议把事件名存成常量，避免手滑写错：

const MY_CUSTOM_EVENT = 'myCustomEvent';
$('#target').on(MY_CUSTOM_EVENT, handler);
$('#target').trigger(MY_CUSTOM_EVENT);

3. 排查有没有代码阻止了事件冒泡 #

如果你的自定义事件是委托绑定在父元素上的，中间某个子元素的事件处理函数要是调用了event.stopPropagation()或者event.stopImmediatePropagation()，就会把事件拦下来。可以在触发事件前后加日志，或者用Chrome DevTools的Event Listeners面板看看有没有阻止冒泡的代码。

4. 确认绑定和触发的元素匹配（符合委托规则） #

虽然你说绑定到了正确元素，但有时候动态元素的替换会坑人——比如绑定的时候元素存在，但之后被JS替换成了新的DOM节点，旧的绑定就失效了（不过click能用可能是因为用了委托？）。如果是委托绑定，触发事件的元素必须是委托选择器的匹配项或者它的子元素，比如绑的是$(document).on('myEvent', '.item', ...)，那得在.item元素上触发，而不是它的父元素。

最后试试最小复现的小技巧 #

要是还找不到问题，可以写一个极简的HTML文件，只保留核心代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="test">测试元素</div>
  <script>
    $(document).ready(function() {
      $('#test').on('myTestEvent', function() {
        alert('事件触发了！');
      });
      // 页面加载后立即触发
      $('#test').trigger('myTestEvent');
    });
  </script>
</body>
</html>

如果这个能正常弹出提示，说明问题出在现有代码的冲突上——比如其他JS库的事件冲突、全局变量污染之类的，再逐步把现有代码加进去排查。

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