jquery - 单击 : Disable and modify text of button inside DataTables

Question

我正在寻求的功能如下:

1. 用户单击 DataTable 内的按钮
2. 该按钮被禁用，其文本从“管理”更改为动画图标 Font Awesome图像范围。
3. Ajax 请求已发送，成功后会弹出一个包含新对话的模式。
4. 按钮恢复其原始形式。

第 1 步和第 3 步工作正常，第 2 步和第 4 步给我带来了一些问题。我认识到我需要使用委托(delegate)事件处理程序来修改数据表中的特定按钮，目前页面上没有任何更改。需要注意的是，该网站使用Bootstrap .

这是带有我的按钮的数据表中的列:

 "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

“this”在成功回调中不可用，因此 $(this).prop("disabled", false); 将不起作用，“this ”在发送ajax之前必须保存到一个变量，检查代码片段(它是一个测试ajax api，响应速度很快)

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

});

<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>