Bootbox zerstören

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'}); 
    }); 
}; 

Wenn der Benutzer auf die Schaltfläche klickt, rufe ich userDatatable auf und initialisiere die Datentabelle neu. Beim ersten Mal, wenn ich auf die Löschschaltfläche in der Datentabelle klicke, erscheint die Bootbox einmalig (alles ist in Ordnung). Aber wenn ich die Datentabelle schließe und neu initialisiere, erscheint dieses Mal, wenn ich auf den Löschen-Knopf in der Datentabelle klicke, die Bootbox zweimal und so weiter.

Ich möchte Bootbox wieder mit Datentabelle reinitialisieren. Ich versuche, Modal in Click-Ereignis vor bootbox.confirm Aufruf zu zerstören. Diesmal funktioniert die Bestätigungstaste nicht.

Wie kann ich Bootbox vollständig zerstören und neu initialisieren.

Answer 1

Das ist, weil Sie die click in der Funktion userDatatable binden, so jedes Mal, wenn Sie es nennen, Sie binden an die Schaltfläche hinzufügen, so, nachdem Sie die Datatable Sie „haben 2 bindet“ auf die Schaltfläche aktualisieren.

Die Lösung besteht darin, den Klick außerhalb userDatatable Funktion zu binden.