动态元素点击失效因事件未委托到静态父级，应使用$(staticParent).on('click','selector',handler)，确保父容器初始化即存在且选择器严格匹配DOM结构。
动态生成的 HTML 元素点击没反应，不是代码写错了，而是事件根本没绑到目标上——.click() 和 .on('click', handler) 只对调用时已存在的 DOM 有效，而动态插入的内容是后来才挂载的。
为什么 $(selector).on('click', handler) 还是不生效
常见错误是把绑定写在页面加载时，但 selector 对应的元素此时还不存在；哪怕你把它挪到 AJAX 的 success 回调里，如果 DOM 插入还没完成（比如 append() 后浏览器还没 flush 渲染），$('.xxx') 仍可能返回空集合。
- 直接
$('.btn').click(...)或$('.btn').on('click', ...)：只绑定当前已匹配到的节点，后续新增的完全无视 - 用
$(document).on('click', '.btn', ...)是可行的，但性能略低，且移动端某些 iOS 版本对document冒泡支持不稳定 - 更推荐绑定到离目标最近的、**确定静态存在**的父容器，比如
$('#container')、$('.layui-nav-tree')、$('.rolelist')
正确写法：用事件委托绑定到静态父级
语法固定为：$(staticParent).on('click', 'dynamicSelector', handler)。关键在于前半部分必须是页面初始化时就存在的 DOM 节点。
- 菜单项是 AJAX 加载后
.append()进#nav的 → 写$('#nav').on('click', '.layui-nav-item', fn) - 表格工具栏按钮是
layer.open({content: html})动态插入的，且父容器也非静态 → 只能退到$(document).on('click', '.layui-table-tool .layui-btn[lay-event]', fn) - 弹窗内表单按钮要触发提交 → 不要用
form.on('submit(filter)')（它只监听初始化时的 form），改用$('#myLayer').on('click', '#save-btn', fn)，前提是#myLayer在success回调中能拿到
配合 Layui 模块时，render() 和事件委托得一起上
光有事件委托还不够——如果动态插入的是带样式的 Layui 组件（如 select、switch、radio），它们的交互和样式依赖模块初始化，否则只是个普通 HTML 元素。
- 确保已通过
layui.use(['form', 'element'], function(){})显式加载对应模块 - DOM 插入完成后立刻调用
form.render('select')或element.render('nav')，参数建议精确到类型，避免全量重绘影响性能 -
form.on('radio(filter)')这类监听，filter 必须和 HTML 中lay-filter="filter"完全一致，大小写、空格都不能差 - 动态插入的按钮若带
lay-event（如表格行内操作），Layui 不会自动接管，仍需原生委托，不能依赖table.on('tool(filter)')——后者只在table.render()初始化时注册一次，reload 后即失效
最易被忽略的一点：事件委托的 selector 必须严格匹配最终渲染出的 DOM 结构。比如你模板里写的是 <button class="del-btn">删</button>，但 JS 拼接时漏了 class 或多加了空格，$('.del-btn') 就永远捕获不到。调试时直接打开控制台，用 $0 点选按钮，再 getElementsByClassName 验证结构，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
