试图禁用数据表中所有页面中的按钮

Question

我正在使用Datatables JQuery插件来显示表上的数据。 在其中一列中，我还添加了一个编辑行的按钮。 我想要做的是当我点击其中一个按钮时，停用所有其他按钮。

这是我的当前代码连同截图：

$(document.body).on("click", "._edit_save_btn",function(e){ 
    var id = this.id; // get id of selected btn 
    // disable all other buttons but selected 
    $("._edit_save_btn").not("#"+id).prop('disabled', true); 

）};

尽管这个数据的第一页（分页呈现）工作正常，当我改变页面，好像没有应用被禁用的财产。 因此，我可以点击任何其他按钮，以添加禁用的属性。

我认为通过使用点击事件的事情会奏效。我在这里错过了什么？

EDIT

在创建表自动使用数据表jquery插件和jQuery功能。 在页面加载我的HTML结构是这样的：

<table id="example"> 
    <thead id="table_head"> 
    </thead> 
</table> 

那么表中填充数据来自Django的到来。按钮元素看起来是这样的：

edit_btn = '<button id="' + row_id + '" class="btn btn-info btn-sm _edit_save_btn" style="background-color:#a7a3a3;border-color:#a7a3a3">Edit</button>' 

EDIT_2

这张截图更好地解释我的意思与分页和不断变化的页面。请检查右下角以查看分页。当我去到另一个页面（例如，从1〜2），然后我看到残疾人财产wasnot申请的按钮，页面上：

编辑

的帮助下@谢林何塞我已成功地达到了这一点：

var disable_buttons = function(class_exists){ 
    if (class_exists){ 
    alert("dfdf") 
    $("._edit_save_btn").not(this).prop('disabled', true); 
    } 
}; 


    $("#example").dataTable({ 
    "scrollX": true, 
    "aaData":whole_array 
    }).on('page.dt', function() { 
    class_exists = $("button").hasClass("clicked"); 
    //alert(class_exists) 
    disable_buttons(class_exists) 
    }); 

每当用户点击一个按钮，则该按钮得到一个名为点击类。 然后在disable_buttons函数中，我检查这个类是否存在（'clicked'类）。如果存在，我想禁用换页事件中的其他按钮。

我现在面临的问题是加载的数据表前

on('page.dt', function() { 

执行！

Answer 1

试试这个，

//define the disable feature as a function 
var disable_buttons = function(){ 
    $("._edit_save_btn").unbind("click").click(function(e){ 
     // disable all other buttons but selected 
     $("._edit_save_btn").not(this).prop('disabled', true); 
    }); 
}; 


//call the above function on dataTable init and page change events like: 
$("#example").dataTable({ 
    "scrollX": true, 
    "aaData":whole_array, 
    "fnDrawCallback":function() { 
     disable_buttons(); 
    } 
});