On-Click：禁用和修改DataTables中按钮的文本

Question

我正在寻求的功能如下：

1. 用户点击位于DataTable
内的按钮
2. 此按钮禁用，其文字从“管理”更改为Font Awesome图像范围内的动画图标。
3. 发送Ajax请求，并在成功时弹出一个带有新对话框的模式。
4. 按钮恢复为原始状态。

步骤1和3工作正常，2和4给我一些问题。我知道我需要使用委托事件处理程序来修改DataTable中的特定按钮，此时页面上没有任何变化。请注意，该网站使用Bootstrap。

以下是DataTable中带有我的按钮的列：

 "columns": [
        ...
        {
            "width": "8%",
            "searchable": false,
            "className": "customStyling",
            "render": function () {
                return '<button style="width: 75px" class="btn btn-primary">Manage</button>';
            }
        }
    ]

我的onclick事件：

$('#myTable tbody').on('click', 'button', function (e) {
    // disable button & change text
    $(this).prop("disabled",true);
    $(this).text('<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>');

    // get data from the relevant row
    var row = myTable.row($(this).closest('tr'));
    var data = row.data();

    ... AJAX REQUEST ...
    ... MODAL APPEARS ...

    // enable button, change text back
    $(this).prop("disabled", false);
    $(this).text('Manage');
});

非常感谢任何帮助。

Answer 1

＆＃34;的此＆＃34;在成功回调中不可用，因此$(this).prop("disabled", false);将无效，＆＃34; 此＆＃34;必须在发送ajax之前保存到变量中，检查片段（它是一个测试ajax api，响应很快）

＆＃13;

＆＃13;

$('button').click(function(){
//save "this" to a variable button
var button = this;
$(button).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
$.ajax({
url:'https://jsonplaceholder.typicode.com/photos',
success:function(data){
   $(button).html('Manage');
}
});

});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button>Manage</button>

＆＃13;

＆＃13;

＆＃13;