layui点击页码后，表格里的按钮就失效了？

Question

如图，在第一页的时候，删除操作是可以用的。
当点击到第二页的时候，删除就失效了。

//查询页面信息，传参：页码
function getInfo(page) {

    $.ajax({

        type: 'post',
        url: '/web/managers/selectAllManagers.do',
        dataType: 'json',
        data: {
            'page': page
        },
        async: false,
        success: function(data) {

            var list = data.data;

            if (data.flag == "success") {
                for (var i = 0; i < list.length; i++) {
                    $('tbody').append(
                        '<tr id="' + list[i].managerid + '">' +
                        '<td>' + list[i].managerid + '</td>' +
                        '<td>' + list[i].realname + '</td>' +
                        '<td>' + list[i].username + '</td>' +
                        '<td>' + list[i].password + '</td>' +
                        '<td>' + list[i].age + '</td>' +
                        '<td>' + list[i].sex + '</td>' +
                        '<td>' + list[i].position + '</td>' +
                        '<td>' + list[i].tel + '</td>' +
                        '<td>' +
                        '<button class="layui-btn layui-btn-small layui-btn-danger" data-toggle="modal" data-target="#delDevice" data-whatever="' + list[i].deviceid + '">删除</button>' +
                        '</td>' +
                        '</tr>'
                    )
                }
            }


            layui.config({
                base: 'base/'
            }).use(['element', 'form', 'layer', 'laypage', 'table'], function() {
                var element = layui.element;
                var table = layui.table;
                var layer = layui.layer;
                var laypage = layui.laypage;

                //分页
                laypage.render({
                    elem: 'layPage' //分页容器的id
                        ,
                    layout: ['prev', 'page', 'next', 'limits', 'count'] //排版
                        ,
                    limit: 10 //每页显示数 
                        ,
                    groups: 3 //连续出现的页数
                        ,
                    count: data.count //总条数
                        ,
                    curr: page,
                    theme: '#1E9FFF' //自定义选中色值
                        ,
                    skip: true //开启跳页
                        ,
                    jump: function(obj, first) {
                        if (!first) {
                            $('tbody').html('');
                            getInfo(obj.curr);
                        }
                    }
                });
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);

        },
    })
}

//删除人员信息；传参：删除项manageid

function delInfo(button,managerid) {

    $.ajax({
        type: 'post',
        url: '/web/managers/deleteManagersById.do',
        dataType: 'json',
        data: {"managerid":managerid},
        async: false,
        success: function(data) {
            if (data.flag == 'success') {           
                button.parents("tr").remove();
                window.location.reload();
                 alert('删除成功');
            } else {
                alert('删除失败');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        },
    })
}





$(function() {

    getInfo(1);


    //删除操作
    $('.layui-btn-danger').on('click', function() {
        var button=$(this);
        var managerid = button.parents('tr').attr('id');
        console.log(managerid);
        delInfo(button,managerid);
    })
})

Answer 1

用事件委托解决了，把删除的点击事件委托给了父层。

$('tbody').on('click',".layui-btn-danger",function() {
    var button=$(this);
    var managerid = button.parents('tr').attr('id');
    console.log(managerid);
    delInfo(button,managerid);
})