JQuery DataTables - fnDrawCallback递归问题 [英] JQuery DataTables - fnDrawCallback Recursive Issue

问题描述

所以在我的数据表中，我有一些按钮可以让记录被编辑。我正在使用JQuery的风格，并给按钮点击功能。将JQuery应用于按钮的唯一方法是将代码放在表的fnDrawCallback选项中。但是，它会导致多个函数的实例！
例如，只是为了测试我正在创建一个警报，给点击按钮的按钮id（这是记录ID）。而不是只是警告我一次，它给了我几个警报！

So in my datatable, I have buttons that allow the record to be edited. I am using JQuery to style and give functions to the button click. The only way to get the JQuery to be applied to the buttons, is by putting the code inside the fnDrawCallback option of the table. However, it causes multiple instances of the functions! For instance, just to test I am creating an alert to give me the button id (which is the record id) when the button is clicked. And instead of just alerting me ONCE, it gives me several alerts!

任何想法？

*作为我注意到，我已经尝试在fnInitComplete选项中声明这些函数，但是只将该函数应用于显示的第一组记录（即10）。一旦显示更多记录或转到下一页，这些功能就不会在这些记录上工作。

*As a side note, I have tried declaring the functions inside the fnInitComplete option but that only applies the function to the first set of records that is displayed (i.e. 10). Once I show more records or go to the next page, the functions dont work on those records.

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

推荐答案

对于我在fnDrawCallback选项中放置的所有函数，使用JQuery的.on函数。
我很好奇为什么使用fnDrawCallback创建相同功能的多个实例，但如果有人有答案。

Ok so found a way around this. Using JQuery's .on function for all the functions I was placing in the fnDrawCallback option. I am curious why using fnDrawCallback is creating multiple instances of the same function though if anyone has an answer to that.

这篇关于JQuery DataTables - fnDrawCallback递归问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！