动态创建的details元素必须手动绑定toggle事件，且summary必须是其第一个子元素；每次创建后需立即初始化，包括设置open状态、绑定事件和持久化处理。
动态创建的details必须手动绑定toggle事件
浏览器不会自动为 JS 动态插入的 details 元素补上事件监听 —— 即使你用 innerHTML 或 appendChild() 插入了带 open 属性的完整结构，toggle 事件也依然不会生效，除非你显式调用 addEventListener('toggle', ...)。
常见错误现象：
- 页面初始渲染的
details能响应点击，但 JS 后续append()的几个全都不触发回调 - 监听写在
DOMContentLoaded里，但那时动态元素还没存在，querySelectorAll('details')根本查不到它们 - 误以为用事件委托（比如监听
document）能捕获toggle，结果发现它不冒泡，委托完全无效
正确做法：
- 每次创建完新的
details元素后，**立刻**执行绑定逻辑，不要等批量插入完再统一查 - 如果用模板字符串生成 HTML，需先
insertAdjacentHTML，再用lastElementChild或选择器定位刚插入的details，再绑定 - 若通过
document.createElement('details')创建，直接在该元素上调用addEventListener('toggle', handler)，最稳妥
toggle 事件在动态元素上不触发？检查是否漏了 summary
动态创建时最容易忽略的是：规范强制要求 <summary></summary> 必须是 <details></details> 的**第一个子元素**，且只能有一个。哪怕只是少写一个标签、或多套了一层 div，都会导致原生交互失效 —— 点击没反应，toggle 自然也不会派发。
立即学习“前端免费学习笔记（深入）”；
典型翻车现场：
-
details.innerHTML = '<div> <summary>标题</summary><p>内容</p> </div>'→summary不是直接子元素，无效 -
details.append(summaryEl, contentEl, anotherDiv)→summary后面还有别的节点，违反“首个子元素”规则 - 用
innerHTML插入时，浏览器自动修正 DOM，把summary提到最前，但 JS 绑定可能已执行在旧节点上，造成监听错位
实操建议：
- 创建后立即验证：
details.firstElementChild?.tagName === 'SUMMARY' - 优先用
details.append(summaryEl)和details.append(contentEl)分步添加，比拼字符串更可控 - 避免在
summary内部再嵌套details或button（除非明确需要，否则易引发嵌套事件干扰）
动态插入后状态持久化要重跑初始化逻辑
如果你用了 localStorage 持久化折叠状态，那每次新插入 details，都得单独走一遍“读取 + 设置 open 状态 + 绑定 toggle”的全流程 —— 原来的初始化代码只跑了一次，对后续动态元素完全不生效。
容易被忽略的细节：
- 新
details的data-id必须唯一，否则多个元素共用同一个localStoragekey，互相覆盖 - 设置初始展开状态不能只写
details.open = true，而要用details.setAttribute('open', '')，否则 CSS 渲染层不同步，动画或样式可能异常 - 如果同时启用了自定义展开动画（如
max-height过渡），新元素还必须额外执行一次“动画容器初始化”，比如给内容区设style.overflow = 'hidden'和style.maxHeight = '0'
推荐封装一个初始化函数：
function initDetails(detailsEl) {
const id = detailsEl.dataset.id;
if (!id) return;
const key = `details_${id}_open`;
const saved = localStorage.getItem(key);
if (saved === 'true') {
detailsEl.setAttribute('open', '');
} else {
detailsEl.removeAttribute('open');
}
detailsEl.addEventListener('toggle', () => {
const isOpen = detailsEl.hasAttribute('open');
localStorage.setItem(key, String(isOpen));
});
}
然后每次创建完 detailsEl 就调用 initDetails(detailsEl)。
用 MutationObserver 监听动态 details 是高风险操作
有人想一劳永逸，用 MutationObserver 监听 body 下所有新增的 details 并自动绑定 —— 理论可行，但实际极易出问题。
核心风险点：
- observer 回调中无法区分是“首次插入”还是“反复替换 innerHTML”，可能导致重复绑定，同一个元素绑了多次
toggle事件 - 若页面框架（如 React/Vue）频繁 patch DOM，observer 可能捕获到中间态节点（比如只有
details开始标签还没闭合），此时调用querySelector('summary')返回null，直接报错 - observer 触发时机早于浏览器完成 DOM 构建（例如图片未加载完），
scrollHeight计算失准，影响后续动画逻辑
更稳的选择：
- 控制创建源头：所有动态
details都由你封装的工厂函数产出，该函数内部完成创建、属性设置、事件绑定、持久化还原全套动作 - 如果必须用 observer，务必加防抖 + 节点完整性校验（如
node.children.length > 0 && node.querySelector('summary')） - 永远不要在 observer 里直接操作
node.open = true，应统一走setAttribute+ 初始化函数
真正麻烦的不是绑定事件本身，而是动态场景下状态、DOM、动画、存储四者之间的时间差和一致性 —— 每个新元素都是独立生命周期，不能假设有全局上下文兜底。
