Solution to "DataTable performance problem in IE with checkboxes / radio buttons"

solutionPerfProblemDataTable.js

    bindCheckboxEvents: function() {
        ...

        SOLUTION TO THE PERFORMANCE PROBLEM

        //keyboard support
        $(checkboxSelector).off('focus.ui-chkbox blur.ui-chkbox keydown.ui-chkbox keyup.ui-chkbox')
                .on('focus.ui-chkbox', function() {
                    var input = $(this),
                    box = input.parent().next();

                    if(input.prop('checked')) {
                        box.removeClass('ui-state-active');
                    }

                    box.addClass('ui-state-focus');
                })
                .on('blur.ui-chkbox', function() {
                    var input = $(this),
                    box = input.parent().next();

                    if(input.prop('checked')) {
                        box.addClass('ui-state-active');
                    }

                    box.removeClass('ui-state-focus');
                })
                .on('keydown.ui-chkbox', function(e) {
                    var keyCode = $.ui.keyCode;
                    if(e.which == keyCode.SPACE) {
                        e.preventDefault();
                    }
                })
                .on('keyup.ui-chkbox', function(e) {
                    var keyCode = $.ui.keyCode;

                    if(e.which == keyCode.SPACE) {
                        var input = $(this),
                        box = input.parent().next();

                        if(input.prop('checked')) {
                            _self.unselectRowWithCheckbox(box);
                        } 
                        else {                        
                            _self.selectRowWithCheckbox(box);
                        }

                        e.preventDefault();
                    }
                });
    },

======== Using with .find() as example for custom events binding

...

var chkboxSelector = tableId + ' tbody.ui-datatable-data tr.ui-widget-content:not(.ui-datatable-empty-message) > td.ui-selection-column .ui-chkbox';

// register click callbacks on checkboxes
$(chkboxSelector).find('.ui-chkbox-box').off("click.ui-chkbox-ext").on("click.ui-chkbox-ext", function () {
    var checkbox = $(this);

    if (!checkbox.hasClass('ui-state-disabled')) {
        var checked = checkbox.hasClass('ui-state-active');

        if (checked) {
            unselectRowWithCheckboxExt(...);
        } else {
            selectRowWithCheckboxExt(...);
        }
    }
});

$(chkboxSelector).find('input').off("keyup.ui-chkbox-ext").on("keyup.ui-chkbox-ext", function (e) {
    var keyCode = $.ui.keyCode;

    if (e.which == keyCode.SPACE) {
        var input = $(this);
        var checkbox = input.parent().next();

        if (input.prop('checked')) {
            unselectRowWithCheckboxExt(...);
        } else {
            selectRowWithCheckboxExt(...);
        }

        e.preventDefault();
    }
});

======== Tip to using without .off(). It's working well with AJAX updates and avoid multiple binding

var checkAllTogglerSelector = tableId + ' table thead th.ui-selection-column .ui-chkbox.ui-chkbox-all .ui-chkbox-box';

// bound custom onclick on "all toggler" checkbox only once
$(checkAllTogglerSelector).not('.click-bound').addClass('click-bound').on('click', function() {
    ...
});