要捕获Layui element中所有导航点击事件，需加载element模块、HTML容器设lay-filter属性、JS中用element.on('nav(filter)', callback)绑定，filter名须严格一致，支持动态生成内容，elem为jQuery对象。
要捕获 Layui element 中所有导航（nav）的点击事件，核心是正确使用 element.on('nav(filter)', callback) 并确保结构、模块加载和事件绑定时机都无误。
必须加载 element 模块并指定 lay-filter
导航事件监听依赖 element 模块，且容器必须设置 lay-filter 属性，否则事件无法触发：
- HTML 中导航容器需带唯一 filter 值，例如：
<div class="layui-nav" lay-filter="topNav">或<ul class="layui-nav layui-nav-tree" lay-filter="sideMenu"> - JS 中必须先
layui.use(['element'], ...)，再调用element.on() - filter 名称需与 HTML 中完全一致（区分大小写），不能遗漏引号
监听任意 nav 容器的通用写法
若页面有多个导航（如顶部 + 左侧），可分别监听，或统一用委托方式捕获所有：
- 推荐按 filter 分别监听，逻辑清晰、便于维护：
<script>
layui.use('element', function(){
var element = layui.element;
// 监听顶部导航
element.on('nav(topNav)', function(elem){
console.log('顶部点击：', elem.text());
});
// 监听左侧菜单
element.on('nav(sideMenu)', function(elem){
console.log('左侧点击：', $(elem).data('url') || elem.attr('href'));
});
});
</script> - 不推荐“监听所有 nav”这种模糊做法——Layui 不提供通配 filter，强行用
element.on('nav(*)',...)无效
动态生成的导航也能捕获
只要导航 DOM 渲染完成后再执行 element.on()，Layui 的 nav 事件就支持动态内容（内部基于事件委托实现）：
- 后端返回菜单数据后，用
$.each拼接 HTML 插入到.layui-nav容器中 - 插入完成后，再调用
element.on('nav(xxx)', ...)即可监听新元素 - 无需手动用
$('body').on('click', '.layui-nav-item a', ...)，那是绕过 Layui 的低效做法
回调参数 elem 是 jQuery 对象，可直接取属性
elem 参数不是原始 DOM，而是被 Layui 封装后的 jQuery 对象，支持常用方法：
-
elem.text()→ 获取菜单文字 -
elem.attr('href')→ 获取 href（注意可能为#或javascript:;） -
elem.data('url')或elem.attr('data-url')→ 获取自定义跳转地址 -
elem.parent().hasClass('layui-nav-item')→ 判断是否为二级菜单项
