JQuery DataTables - fnDrawCallback 递归问题答案

【问题标题】：JQuery DataTables - fnDrawCallback Recursive IssueJQuery DataTables - fnDrawCallback 递归问题
【发布时间】：2011-11-18 17:49:39
【问题描述】：

所以在我的数据表中，我有允许编辑记录的按钮。我正在使用 JQuery 来设置样式并为按钮单击提供功能。将 JQuery 应用于按钮的唯一方法是将代码放在表的 fnDrawCallback 选项中。但是，它会导致函数的多个实例！例如，只是为了测试我正在创建一个警报，以便在单击按钮时为我提供按钮 ID（即记录 ID）。而不是只提醒我一次，它给了我几个提醒！

有什么想法吗？

*作为旁注，我尝试在 fnInitComplete 选项中声明函数，但这仅将函数应用于显示的第一组记录（即 10）。一旦我显示更多记录或转到下一页，这些功能将无法处理这些记录。

var tfTable = $('.mypbhs_truforms').dataTable({
        "bProcessing": true,
        "sAjaxSource": 'sql/mypbhs_truforms.php?accountid=<?PHP echo $accountid;?>',        
        "aaSorting": [[ 1, "asc" ]],
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        //"bStateSave": true, //Use a cookie to save current display of items
        "aoColumns": [
            {"asSorting": [  ], "sClass":"center"},
            null,
            null,
            null,
            null,
            null,
            {"asSorting": [  ], "sClass":"center"},
        ],
        "fnDrawCallback": function(){
            //EDIT OFFICE FORM
            $('.mypbhs_edit_truform_button').click(function(){
                var tf_id = $(this).attr('id');
                alert(tf_id);
            });
        },
        "bScrollCollapse": true,
        "sScrollX": "100%",
         "fnInitComplete": function() {
                tfTable.fnAdjustColumnSizing();
         }
    });

【问题讨论】：

标签： jquery callback datatables

【解决方案1】：

好的，所以找到了解决方法。对我放置在 fnDrawCallback 选项中的所有函数使用 JQuery 的 .on 函数。我很好奇为什么使用 fnDrawCallback 会创建同一函数的多个实例，但如果有人对此有答案的话。

【讨论】：

【解决方案2】：

.mypbhs_edit_truform_button 住在哪里？如果它在原始表本身之外，则每次重绘表时都会再次绑定。由于.on() 有效，它可能处于委托模式（因为它可以只是.click() 的直接翻译）.. 这意味着它确实存在于原始表本身之外，因此存在多个绑定。

如果您想以原始方式执行此操作（尽管我认为 .on() 更好），是否有任何理由不将其放入 InitComplete 回调中？

【讨论】：