根本原因是混淆工具将类名重命名而选择器字符串未同步更新，导致事件委托失效；推荐策略包括禁止混淆关键类名、用data属性替代class、或运行时动态生成选择器。
核心问题不在事件委托本身，而在于混淆后选择器字符串与实际 DOM 类名不匹配——比如代码里写 $('.truncated')，打包后类名被重命名为 a 或 _t，但选择器字符串没变，自然查不到元素。
根本原因：混淆破坏了“字符串硬编码”的一致性
事件委托依赖 CSS 选择器字符串（如 '.truncated'）在运行时去匹配 DOM。一旦构建工具（Terser/esbuild）把类名 truncated 混淆成 t1，而你的 JS 里仍用 '.truncated' 去委托，就永远找不到目标节点。
- 这不是 jQuery 或事件冒泡的问题，是构建阶段的符号映射断裂
- 常见于 Vue/React 项目中用 class 名做事件代理、或直接操作 DOM 的老式写法
- 尤其危险的是：开发环境不混淆，一切正常；上线后突然失效，且控制台无报错
三类可靠应对策略
策略一：禁止混淆关键类名（推荐初学者）
在 Vite 或 Webpack 配置中显式保留类名字符串不被重命名：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Vite（v5+）：在
vite.config.ts的build.minify配置中启用terserOptions，添加keep_classnames: true，并用keep_fnames保护函数名（若委托逻辑封装在函数内） - Webpack：在
TerserPlugin配置中设置keep_classnames: /truncated|full|ajax-venue|ajax-date/正则白名单 - 注意：只保留在 JS 中作为选择器使用的类名，不是所有 HTML class；HTML 中的 class 不会被混淆，混淆的是 JS 里出现的字符串字面量
策略二：用 data 属性替代 class 做委托标识（推荐中大型项目）
彻底绕过类名混淆风险，把委托依据从视觉类名迁移到语义化 data 属性：
- HTML 改为：
<span data-role="truncated">img_abc123</span><span data-role="full">img_abc1234567890.jpg</span> - JS 改为：
$(document).on('click', '[data-role="truncated"]', function() { ... }) - 优势：data 属性值默认不参与混淆；语义清晰；便于后续自动化测试和可访问性增强
策略三：运行时动态生成选择器（适合高度定制场景）
若必须用 class 名，且无法控制混淆配置，可将类名从字符串改为变量引用，并确保该变量不被混淆：
- 定义常量：
const TRUNCATED_CLASS = 'truncated'; const FULL_CLASS = 'full'; - 在构建配置中将这些常量名加入保留列表（如 Terser 的
keep_fnames或mangle.exclude） - 委托写法：
$(document).on('click', '.' + TRUNCATED_CLASS, ...) - 关键点：变量名必须全局唯一、不可压缩，否则字符串拼接依然失效
避坑提醒
不要依赖 element.className 或 e.target.classList 在混淆后做判断——如果 classList 对象本身被混淆（极少见），或你用 includes('truncated') 硬编码字符串，同样会断掉。
- 优先使用
e.target.closest('[data-role="truncated"]')，它不依赖字符串匹配，而是靠 DOM 结构查找 - 避免在
eval、Function构造器或obj['truncated']中出现类名字符串 - 上线前必做验证：用生产构建产物打开浏览器，执行
$('[data-role="truncated"]').length和document.querySelectorAll('.truncated').length对比，确认两者一致
