ajax不会实时更新元素

Question

查看以下jQuery .on（）方法进行ajax调用：

 $('tbody').on('click', 'button',function() {
        var updInfo = {}; 
        updInfo.unqid = $(this).closest('tr').attr('unqid');        
        $.ajax({
            url: "http://localhost/ReceptionVisitorKiosk/basecoat/server/checkout.php",
            data: updInfo,
            type: 'POST',
            dataType: 'json',
        }).done(function(data) {            
            $(this).closest('tr').removeClass('active-visitor').addClass('inactive-visitor');   
            $(this).addClass('glyphicon glyphicon-ok'); 
            console.log(data); 
        }).fail(function(status,errorThrown){
            console.log(errorThrown);
        }).always(function(xhr,status){
            console.log("The request 2 is complete");
        }); // End AJAX call 
    });

当用户单击按钮时，将调用php脚本并更新数据库。但是，我们应该期望.done（）然后删除并将类添加到$(this)。我无法在浏览器或f12＆gt;中看到这种情况。检查员视图

刷新整页后，类更改可见。