动态插入的HTML元素需事件委托或插入后立即绑定监听器；直接绑定对新元素无效，因DOM查询是快照式且执行时机决定是否查到元素。
动态插入的 HTML 元素默认没有事件监听器，直接用 querySelector 或 getElementById 找到后绑定 onclick，只对已存在的元素生效；新插入的节点不会自动获得事件——这不是 bug，是 DOM 选择时机导致的必然结果。
为什么 document.querySelector("button").onclick = fn 不管用？
因为这行代码执行时，目标 button 可能还没被插入 DOM。浏览器按顺序解析 JS，如果插入操作在绑定之后，querySelector 返回 null，赋值静默失败，控制台也不报错。
- 常见现象：页面初始按钮能点，AJAX 加载的新按钮点击无反应
- 调试建议：在绑定前加
console.log(document.querySelector("button"))，确认是否为null - 根本原因：DOM 查询是“快照式”的，不随后续插入自动更新
addEventListener 绑定后，动态元素仍不响应？
单独给每个动态元素调用 addEventListener 是可行的，但必须确保在元素插入 DOM 之后 立即执行。很多人把绑定逻辑写在插入前，或放在全局初始化脚本里，导致漏绑。
- 正确顺序：创建元素 → 插入到 DOM（如
parent.appendChild(el)）→ 再调用el.addEventListener("click", handler) - 注意：用
innerHTML批量插入时，无法直接对其中新节点调用addEventListener，需先用querySelectorAll提取再遍历绑定 - 风险点：若插入后未手动绑定，或绑定时用了闭包变量（如循环中的
i），可能所有事件都指向同一个值
最稳妥的入门解法：用事件委托代替逐个绑定
把监听器挂在父容器（甚至 document）上，利用事件冒泡捕获子元素触发，无需关心元素何时生成。这是现代前端处理动态内容的默认做法。
立即学习“前端免费学习笔记（深入）”；
- 原生写法：
document.addEventListener("click", e => { if (e.target.matches(".dynamic-btn")) { /* 处理逻辑 */ } }) - jQuery 写法：
$(document).on("click", ".dynamic-btn", handler) - 关键点：选择器字符串（如
".dynamic-btn"）在事件触发时才匹配，所以支持未来插入的节点 - 性能提示：别盲目挂到
document，优先选离目标最近的、生命周期稳定的父容器（如#list-container）
事件委托看似绕了一步，但它把“绑定时机”这个易错点彻底移除了。真正容易被忽略的是：委托目标的选择器必须精确匹配动态元素的最终状态——比如用 button[data-id] 就比 button 更安全，避免误触其他按钮。
