关于#javascript# #layui#的问题：layui-table头部工具栏事件无效

Question

layui-table头部工具栏事件无效

查阅过文档，table属性lay-filter与toolbar事件绑定一致，但事件不生效

---

问：该如何处理能让事件生效？代码示例如下：(注意：工具栏中"订单数量"、"用户数量"、"订单总金额"三项不绑定事件)

table&toolbar 代码示例

<table id="table-main" lay-filter="table-main"></table>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn btn-success layui-btn-sm">订单数量：0</button>
        <button class="layui-btn btn-success layui-btn-sm">用户数量：0</button>
        <button class="layui-btn btn-success layui-btn-sm">订单总金额：0元</button>
        <button class="layui-btn btn-warning layui-btn-sm" lay-event="add">详情补录</button>
    </div>
</script>

---

js 片段代码示例

layui.use('table', function () {
    const table = layui.table;
    //第一个实例
    table.render({
        elem: '#table-main',
        toolbar: '#toolbar',
        height: 312,
        url: 'http://027.ckkj.ink/?s=Main_Index.getGamePayData', //数据接口,
        page: true, //开启分页
        limits: [25, 50, 100],
        method: 'POST',
        request: json,
        cols: [[ //表头
    });
    //触发事件
    table.on('toolbar(table-main)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        console.log(checkStatus, obj)
        switch (obj.event) {
            case 'add':
                layer.msg('添加');
                break;
            case 'delete':
                layer.msg('删除');
                break;
            case 'update':
                layer.msg('编辑');
                break;
        };
    });
})

Answer 1

按F12进入调试界面看一下，有没有提示报错，打印这个：obj.event值，看一下是什么。