layui 表格重载导致表头工具栏失效【一】

问题描述

layui 数据表格重载后，表头的工具栏按钮点击失效，不能二次点击，必须刷新整个页面才能生效！

问题分析

因为工具栏的按钮是后期渲染出来的，所以第一次载入页面按钮事件是生效的，但是重载之后按钮也会重新加载。这时候按钮就变成未来元素了。这时候按钮就会捕捉不到click操作。

解决办法

采用事件委托的方式对按钮进行绑定

1、工具栏按钮：

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="btnCreate" type="button">新增</button>
    </div>
</script>

2、js 部分：

<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table
            , form = layui.form;
        var loadingMsg = layer.msg('数据请求中', {icon: 16, scrollbar: false, time: 0});

        table.render({
            elem: '#test'
            , url: '{{ url_for("rbac_bp.rolelistresource") }}'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cellMinWidth: 120  // 单元格最新宽度，全局
            , title: '用户数据表'
            , cols: [[
                {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'name', title: '名称', edit: 'text'}
                , {field: 'remark', title: '备注', edit: 'text'}
                , {field: 'details', title: '详情', edit: 'text'}
                , {field: 'enable', title: '是否开启', edit: 'text'}
                , {field: 'code', title: '角色标识', edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , id: 'testReload'
            , page: true
            , done: function (res, curr, count) {
                layer.close(loadingMsg);
            }
        });
       
        // 表格重载
        function tableReload() {
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

        // 使用事件委托避免点击事件失效
        $("body").on("click", "#btnCreate", function () {
            layer.open({
                type: 2,
                title: '新增角色',
                shadeClose: true,
                maxmin: false,
                fixed: false,
                resize: false,
                area: ['880px', '580px'],
                content: "{{url_for('common_bp.get_role_form')}}",
                end: function () {
                    //关闭时做的事情，表格重载
                    tableReload();
                    {#layer.close();#}
                }
            });
        });

        
    });

</script>

参考：使用Layui数据表格，表格重载之后，表头工具栏按钮失效！【已解决】