jQuery数据表在分页时丢失引用

Question

我目前有一个在服务器端生成的表（表a）。单击表a中的一行调用CreateTable（arrayData）:

function CreateTable(arrayData){
var table = $('#tableB').DataTable({
            destroy: true,
            bFilter: false,
            bLengthChange: false,
            dt: "[-head|-body]-left",
            "data": arrayData,
            "language": {
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Prev"
                }
});
$('#tableB tbody').on('click', 'tr', function () {
    //$("#tableB tbody tr").click(function (event) {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }else{
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    var rowIdx = table.row(this).index();
    SetInfo(arrData[rowIdx], null);
    });
}

当我第一次单击表A中的任何行时，表格B的分页和行高亮显示都可以正常工作。但是，当我单击表A中的另一行时，表格B中亮显的行将停止工作，并且SetInfo()不知何故被调用了两次。如果我再次选择表A中的另一行，SetInfo()现在被调用四次，然后是八次等等。当我尝试使用（当前已注释完毕）时：

$("#tableB tbody tr").click(function (event) {...}

表B的第1页上的所有内容都能正常工作，但在任何其他页面上都不能正常工作——它似乎没有正确绑定。

知道我可能做错了什么吗？

Answer 1

我们想明白了。我们将绑定放在自己的方法中，并使用回调"drawCallback"：

function CreateTable(arrayData){
    var table = $('#tableB').DataTable({
    destroy: true,
    bFilter: false,
    bLengthChange: false,
    dt: "[-head|-body]-left",
    "data": arrayOfData,
    "drawCallback": BindOnClick,
    "pageLength": 5,
    ....etc.
 });
function BindOnClick() {
    //get the table object:
    var table = $('#tableB').DataTable();
    //set the row highlighting:
    $("#tableB tbody tr").off("click").on("click", function () {  //.off in order to avoid multiple bindings
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
       }
       else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        }
        //now call any method you want and pass in data
        //based on row index:
        var rowIdx = table.row(this).index();
        SetInfo(table.data()[rowIdx]);
    });
 }