javascript - 破坏bootbox

Question

var userDatatable = function (id) {
    $('#datatable_users_container').removeClass('hide');
    goToByScroll('datatable_users_container');

    var dUser = $('#datatable_users').DataTable({
        "responsive"    : true,
        "processing"    : true,
        "serverSide"    : true,
        "destroy"       : true,
        "ajax"          : function (data, callback, settings) {
            $.ajax({
                url         : api.institutions + '/' + id + '/users',
                type        : 'get',
                data        : {
                    'page'      : $('#datatable_users').DataTable().page.info().page + 1,
                    'per_page'  : data.length,
                    'order_by'  : data.order[0].dir,
                    'sort_by'   : data.columns[data.order[0].column].data,
                },
                dataType    : 'json',
                success     : function (response) {
                    callback({
                        recordsTotal    : response.meta.pagination.total,
                        recordsFiltered : response.meta.pagination.total,
                        data            : response.data
                    });

                    // Görselde düzgün görünsün diye, son sütunu ortalar.
                    $('#datatable_users thead th:last').addClass('text-center');
                    $('#datatable_users tbody tr').each(function () {
                        $(this).find('td:last').addClass('text-center');
                    });
                }
            });
        },
        "columns"       : [
            {"data" : "identifier"},
            {"data" : "fullName"},
            {"data" : "email" },
            {"data" : "userType", render : function (data, type, row, meta) {
                if (row.userType == 0) return "Admin";
                if (row.userType == 1) return "Şef";
                if (row.userType == 2) return "Uzman";
            }},
            {"data" : "actions", render : function (data, type, row, meta) {
                return  '<div class="btn-group btn-group-circle btn-group-solid" style="position: relative !important;">' +
                    '<a href="/templates/'+row.identifier+'" class="btn btn-sm green"><i class="icon-magnifier"></i></a>' +
                    '<a href="/templates/edit/'+row.identifier+'" class="btn btn-sm yellow"><i class="icon-note"></i></a>' +
                    '<button class="btn btn-sm red remove-user" data-id="'+row.identifier+'"><i class="icon-trash"></i></button>' +
                    '</div>';
            }},
        ],
        "columnDefs"    : [
            {
                "targets": 'no-sort',
                "orderable": false
            }
        ],
        "bFilter"       : false,
        "sPaginationType": "full_numbers",
    });

    $('#datatable_users tbody').on('click', '.remove-user', function () {
        var identifier = $(this).attr('data-id');
        var dialog = bootbox.confirm({
            size    : 'small',
            message : '<div class="text-center">Silmek istediğinize emin misiniz ?</div>',
            buttons : {
                confirm : {
                    label       : '&nbsp;&nbsp;&nbsp;Evet&nbsp;&nbsp;&nbsp;',
                    className   : 'red-mint'
                },
                cancel : {
                    label       : 'Vazgeç',
                    className   : 'grey-salsa'
                }
            },
            callback : function (result) {
                if (!result)
                    return;

                $.ajax({
                    url         : api.users + '/' + identifier,
                    type        : 'delete',
                    dataType    : 'json',
                    success     : function (response) {
                        toastr.success('Çalışan <em>"'+response.data.fullName+'"</em> silindi.');
                        dUser.ajax.reload(null, false);
                    }
                });
            }
        }).find('.modal-footer').css({'text-align' : 'center'});
    });
};

当用户单击按钮时，我调用 userDatatable 并重新初始化数据表。第一次，当我点击数据表上的删除按钮时，bootbox 出现一次(一切正常)。但是如果我关闭数据表并再次初始化，这次当我点击数据表上的删除按钮时，bootbox 出现两次等等。

我想用数据表重新初始化bootbox。在 bootbox.confirm 调用之前，我尝试在点击事件中销毁模态。这次，确认按钮不起作用。

我怎样才能完全销毁 bootbox 并再次重新初始化。

Answer 1

那是因为你在函数 userDatatable 中绑定(bind)了 click 所以每次你调用它时，你都 add 绑定(bind)到按钮，所以在你之后刷新按钮上“有 2 个绑定(bind)”的数据表。

解决方法是在userDatatable函数外绑定(bind)点击。