本文详解 jQuery 事件委托中 .on('click', selector, handler) 的标准写法，纠正将 .click(selector, handler) 误用于事件委托的常见错误，并提供精准操作相邻 DOM 元素的可靠方案。
本文详解 jquery 事件委托中 `.on('click', selector, handler)` 的标准写法，纠正将 `.click(selector, handler)` 误用于事件委托的常见错误，并提供精准操作相邻 dom 元素的可靠方案。
在使用 jQuery 实现动态生成内容（如多图上传后的文件名展示）的交互逻辑时，一个高频陷阱是：混淆了直接绑定与事件委托的语法差异，导致点击行为响应错位、目标元素选取失败。你遇到的问题——点击 .truncated 文本时仅执行 removeClass 而未触发 addClass，甚至意外在点击图片时才生效——根源并非 DOM 结构或事件冒泡异常，而是 jQuery API 的误用。
关键问题在于这行代码：
$(document).click('.truncated', function(e) { ... });该写法 并非事件委托，而是 jQuery 的 .click() 方法变体：当传入字符串选择器作为第一个参数时，它被解释为 传递给事件处理函数的 data 对象（已废弃且极易误导），而非委托目标。因此，该事件实际绑定在 document 上，但无筛选逻辑，所有 document 级点击都会进入此 handler，而 e.originalEvent.target 的层级关系又使 target.next('span.truncated') 永远为空（因为 .truncated 就是 target 自身，不存在“下一个同名兄弟”）。
✅ 正确做法是使用标准事件委托语法：
$(document).on('click', '.truncated', function(e) {
const $target = $(this); // 推荐：直接用 this，更简洁安全
$target.addClass('hidden');
$target.next('span.full').removeClass('hidden');
});这里：
- $(document).on('click', '.truncated', ...) 表示：监听 document 上所有冒泡至它的 'click' 事件，仅当原始触发元素匹配 .truncated 时才执行 handler；
- this 在 handler 内自动指向被点击的 .truncated 元素（无需 e.originalEvent.target 二次包装），语义清晰且性能更优；
- next('span.full') 正确获取紧邻其后的完整文件名 <span>，前提是 HTML 结构满足：.truncated 与 .full 是同级、相邻的兄弟节点（例如 <span class="truncated">img_abc...</span><span class="full">img_abc_long_filename.jpg</span>）。
? 进阶建议（提升健壮性）：
- 若结构可能变化（如中间插入其他元素），改用 siblings('.full') 或更明确的属性定位（如 data-for="filename-123"）；
- 为避免多次绑定，确保该 on() 语句只执行一次（例如放在 DOM ready 块内，而非重复调用的函数中）；
- 现代项目推荐逐步迁移到原生 addEventListener + 事件委托（利用 e.target.closest('.truncated')），减少 jQuery 依赖。
总结：事件委托必须使用 .on(eventType, selector, handler) 形式；next() 操作前需确认 DOM 层级关系；善用 this 替代冗余的 $(e.originalEvent.target)。修正后，每次点击任一 .truncated 文本，都将精准隐藏自身并显示对应 .full 内容，完全符合多实例场景下的独立控制需求。
