按钮点击一次后就失效了

Question

layui 表格中按钮点击一次后失效。

<script type="text/html" id="toolbar">
            <div class="layui-inline">
              <div class="layui-input-block" style="margin-left: 0px;margin-right: 10px;">
                  <input type="text" name="textinput" id="text" class="layui-input" style="width: 260px;" placeholder="支持输入墓主姓名、经办人、到期时间">
              </div>
              </div>
              
              <div class="layui-inline">
                  <button class="layui-btn btn-top" data-type="find" id="find">查询</button>
                  <button class="layui-btn btn-top" data-type="refresh" id="refresh">刷新</button>
              </div>
          </script>

使用类选择器点击一次后就失效了，但是使用id选择器是正常的？

$('.btn-top').on('click', function(){
      console.log("点击按钮")
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

// $('#find').on('click',function(){
    //   console.log("点击按钮find")
    // })

按钮我是放在table里的，会不会是table的问题？

table.render({
        elem: '#custom-table-operate',
        url: 'Custom_customList', // 此处为静态模拟数据，实际使用时需换成真实接口
        toolbar: '#toolbar',
    defaultToolbar: ['exports', 'print']
}）

Answer 1

该问题可能发生的几个原因：

在数据重新加载或视图重新渲染后，事件绑定可能会丢失，因此需要重新绑定事件处理器。这可能是你遇到问题的主要原因，因为你的按钮在表格渲染后创建。
后来渲染的元素可能无法通过常规的点击事件进行绑定。

针对这两个可能的原因，你可以尝试以下代码来进行事件的委派，将点击事件绑定到静态存在的父元素上，然后通过选择器参数去限定子元素。Layui将按钮加入到table之后，事件会自动委派到那些后来加入的按钮元素。

$('body').on('click', '.btn-top', function() {
  console.log("点击按钮")
  var type = $(this).data('type');
  active[type] ? active[type].call(this) : '';
});

这里使用 'body' 是保守的做法，理论上你可以选择比 'body' 更具体的父级元素，只要它在 .btn-top 被创建时已经存在就可以。
希望这个答案能解决你的问题，如果有其他疑问，欢迎继续提问。