layui行工具栏按钮失效

我使用layui的数据表格显示数据之后，行工具栏按钮失效。
经过对照官方文档之后，仍不得其解
以下是我的代码

官网上的table.render

我的table.render

官网上toolbar对应的模板

我的toolbar对应的模板

官网上的table.on

我的table.on

我的table

点击编辑删除，控制台均无输出

模板#bar里有拼写错误，把 lay-event 写成 layui-event 了。

不知道你这个问题是否已经解决, 如果还没有解决的话:

以下回答来自chatgpt:
我可以尝试帮助解决该问题。
首先，需要检查以下几个问题：
1. 行工具栏按钮是否正确设置了lay-event属性，且与表格渲染时的toolbars属性对应；
2. 行工具栏按钮所对应的事件是否正确绑定；
3. 表格渲染时是否正确引用了layui.js和layui.css文件。
以下是我的解决方案：
1. 检查渲染表格时的toolbars属性是否正确设置
根据官方文档，toolbars属性用来定义表格上方的工具栏，而行工具栏使用的是行事件监听（row event listen）的方式来实现。因此，需要在渲染表格时同时设置toolbars和行监听器。
下面是一个示例的table.render代码：
```
table.render({
  elem: '#table',
  url: '/api/data',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'username', title: '用户名'},
    {field: 'email', title: '邮箱'},
    {field: 'phone', title: '电话'},
    {fixed: 'right', title: '操作', toolbar: '#bar'}
  ]],
  toolbar: '#toolbar',
  page: true
});
```
其中，#bar是一个模板，用来定义行工具栏上的按钮，如下：
```
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
```
需要注意的是，模板中的按钮需要设置lay-event属性，这是行事件监听器的关键。
1. 检查行监听器的绑定是否正确
行监听器用于处理行工具栏上的按钮点击事件，需要在table.render后使用table.on进行绑定。
下面是一个示例的table.on代码：
```
table.on('tool(table)', function(obj){
  var data = obj.data;
  if (obj.event === 'edit') {
    // 编辑按钮点击事件处理
    console.log('edit');
  } else if (obj.event === 'del') {
    // 删除按钮点击事件处理
    console.log('delete');
  }
});
```
其中，'tool(table)'中的'tool'是固定的，而'table'是对应渲染表格时的elem属性。
需要注意的是，行监听器绑定时的第一个参数需要与渲染表格时的elem属性对应，否则行工具栏按钮的点击事件无法正确捕捉。
1. 确认layui.js和layui.css文件是否正确引用
最后，需要确保在HTML文件中正确引用layui.js和layui.css文件，可以在头部加入以下代码：
```
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
```
请注意，这里使用了layui的CDN资源，如果您是在本地使用layui，请根据实际情况进行替换。
如果所有的步骤都按照上述方式正确执行，那么点击行工具栏按钮应该可以正常触发事件，并在控制台中输出对应的信息。如果问题仍然存在，请提供更多的代码和错误信息，以便我进一步分析问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^