jQuery数据表-显示详细信息行在数据更新后无法正常工作

Question

问题： 引用下面的jQuery DataTable链接，可以完美地单击+图标（即显示行详细信息），但是当数据第二次更新时，此后将不起作用。

主要条件：

if (row.child.isShown()) {
...
} else {
...
}

我正在关注的教程here。

我的观察-我发现当我第二次刷新数据并单击+图标时，如果＆else条件异常，它将同时执行。即它显示该行并立即隐藏该行。

当我第三次刷新数据并单击+图标时，它完全可以在单击+图标时运行，执行if-else-if（console.log中的所有3个），

当我第四次刷新数据并单击+图标时，在执行if-else-if-else之后（日志下有4次），它不起作用。

var detailRows = [];
$('#alertTable tbody').on('click', 'tr td.details-control', function (e) {
    e.preventDefault();
    var tr = $(this).closest('tr');
    table = $('#alertTable').DataTable();
    var row = table.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);
    if (row.child.isShown()) {
        console.log('True...');
        tr.removeClass('details');
        row.child.hide();
        detailRows.splice(idx, 1);
    } else {
        console.log('False...');
        tr.addClass('details');
        row.child(format(row.data())).show();
        if (idx === -1) {
            detailRows.push(tr.attr('id'));
        }
    }
});
table.on('draw', function (e) {
    e.preventDefault();
    $.each(detailRows, function (i, id) {
        $('#' + id + ' td.details-control').trigger('click');
    });
});

仅奇数数据刷新有效。任何帮助将不胜感激。