Layui tab 切换不触发 tabChange 是因该事件非原生 DOM 事件，须用 element.on('tab(filter)') 监听；需为每个 tab-item 设唯一 id，切换时按 ID 分发 init 函数，并注意销毁旧实例（如 echarts.dispose()、table.reload()）再重建，异步加载内容时应于 AJAX 成功回调中执行重载而非依赖 tab 切换事件。
tab 切换后 layui.tabChange 事件没触发？
因为 layui 的 tab 模块本身不提供原生的 tabchange 事件——这是个常见误解。你查文档看到的 tabchange 实际是 element.on('tab(xxx)') 的监听名，不是 dom 事件，也不是全局函数。直接写 layui.tabchange 会报 undefined 或 not a function 错误。
正确做法是用 element.on('tab(XXX)') 监听指定 filter 的 tab 栏，其中 XXX 必须和 lay-id 或容器的 lay-filter 值一致。
- 确保 tab 容器（如
<div class="layui-tab" lay-filter="userTab">）有明确的lay-filter - 监听时必须用完全相同的字符串：例如
element.on('tab(userTab)', callback) - 回调函数的参数
data里有data.index（当前激活页签索引）和data.elem（当前 tab-pane 元素）
如何在切换到某页签时重载该页专属 JS？
不能靠“页面加载一次就完事”，因为 tab 是复用 DOM 的：首次点击加载内容，后续切换只是 display: block/none 切换，不会重新执行 JS。你需要手动触发重载逻辑。
推荐把每个 tab 页的初始化逻辑封装成独立函数，比如 initUserPage()、initOrderPage()，然后在 element.on('tab(xxx)') 回调里按索引或 data.elem 的 id/lay-id 分发调用。
- 给每个
<div class="layui-tab-item">加唯一id或lay-id，例如<div class="layui-tab-item" id="tab-user"> - 在回调中用
$(data.elem).attr('id')或data.elem.id判断当前页签身份 - 避免在回调里重复绑定事件——每次切换都绑一次会导致多次触发，应在重载函数内先
off()再on()
element.on('tab(userTabs)', function(data){
const tabId = data.elem.id;
if(tabId === 'tab-user') initUserPage();
if(tabId === 'tab-order') initOrderPage();
});
为什么 initXxx() 执行了但图表/表格没刷新？
因为像 echarts.init()、layui.table.render() 这类方法，如果目标容器已存在实例，再次调用会报错或静默失败。它们不是“重载”，而是“新建”。
必须主动销毁旧实例再重建，或者调用对应刷新方法：
-
echarts.getInstanceByDom(dom)存在时，先dispose()再init() -
layui.table推荐用table.reload('id')而非重复table.render() - 自定义组件（如时间选择器、富文本）注意是否支持
reload，否则需手动destroy()+ 重新初始化
切换太快导致 JS 未加载完成就执行？
典型于异步加载 tab 内容（content 属性为 URL）时：tab 切换事件触发早于 AJAX 返回，data.elem 里还是空内容，initXxx() 拿不到目标元素。
解决方案只有两个，且必须二选一：
- 放弃异步加载 content，改用前端静态 HTML 片段（最稳）
- 若必须远程加载，则监听
ajaxSuccess或在 success 回调末尾手动触发重载，**不要依赖 tab 切换事件**
Layui 的 content 加载没有提供“加载完成钩子”，所以硬等它回调再执行 JS 是唯一可靠路径。
