JQuery DataTables - fnDrawCallback Recursive Issue

问题:

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!

Any ideas?

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

回答1:

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.

回答2:

Where does .mypbhs_edit_truform_button live? If it's outside of the raw table itself, it will be bound again each time the table is redrawn. Since .on() works, it is presumably in delegate mode (because it CAN just be a direct translation of .click()) .. this implies that it does live outside the raw table itself, hence multiple bindings.

If you wanted to do it the original way (though I think .on() is better), is there any reason to not put it in the InitComplete callback instead?