jQuery和数据表附加事件问题

Question

I have a problem with attaching an event on list of checkboxes on td,im using column filter plugin so the problem is the event is attached only on the first page, so i used the fnDrawCallback to attach the event on checkbox when drawing the datatable, the problem is when i pagintate twice or i write ab it attaches the event twice.so the checkboxes doesn't work. here's my javascript code that i use :

$(document).ready(function () {
    $('#example').dataTable({
        "fnDrawCallback": function (oSettings) {
            $("[id*='UsertmpCheckbox']").on('change', function () {
                //alert(parseInt($(this).attr('id').replace(/[^0-9\.]/g, '')));
                var checkboxid = '#UserCheckbox' + parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''));
                alert(checkboxid);
                if ($(checkboxid).prop('checked') == false) {
                    $(checkboxid).prop('checked', true);
                } else {
                    $(checkboxid).prop('checked', false);
                }
            });
        }
    }).columnFilter({ /*sPlaceHolder: "head:after",*/
        aoColumns: [{
            type: "checkbox",
            values: null /*[ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Tasman', 'Webkit']*/
        }, {}, {}, {}, {
            type: "checkbox",
            values: ['A', 'B', 'C', 'U', 'X']
        }]
    });
});

the function that is attaching the event is in fnDrawCallback callback.

thanks in advance

Answer 1

Answer :-

$(document).ready( function () {
            $('#example').dataTable( {

                "fnDrawCallback": function( oSettings ) {
                    $("[id*='UsertmpCheckbox']").off('click');
                    $("[id*='UsertmpCheckbox']").on('click',function() {
                        //alert(parseInt($(this).attr('id').replace(/[^0-9\.]/g, '')));
                        var checkboxid = '#UserCheckbox'+parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''));
                        alert(checkboxid);
                        if($(checkboxid).prop('checked')==false){
                            $(checkboxid).prop('checked', true);
                        }
                        else{
                            $(checkboxid).prop('checked', false);
                        }

                    });

                }
            } ).columnFilter({ /*sPlaceHolder: "head:after",*/ aoColumns: [
          {  type: "checkbox", values: null /*[ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Tasman', 'Webkit']*/ },{},{},{},{ type: "checkbox", values: [ 'A', 'B', 'C', 'U', 'X']  } ]});
        } );