Jquery 更改剑道UI网格行字体颜色导致奇怪的选定CSS显示问题

使用剑道UI网格，在通过jQuery向一行中的每个TD添加了一个简单的CSS类后，我遇到了奇怪的选择项样式问题，请参见我的小提琴：

剑道UI小提琴（v2014.1.318）的最新版本，演示了该错误：

此提琴引用的是v2013.1.514，错误不存在：

将字体颜色更改为红色并再次选择行后，k-state-selected类的行为异常，单击时不再突出显示整行，而是间歇性地：

$(document).ready(function () {

            var dataSource;
            var kendoCheckedIds = {};

            dataSource = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 10
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                groupable: true,
                sortable: true,
                selectable: "row",
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{ template: "<input type='checkbox' class='checkbox' />", width: 30 },
                    {
                        field: "ContactName",
                        title: "Contact Name",
                        width: 200
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title",
                        width: 250
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
            })
            .data("kendoGrid")
            .table.on("click", ".checkbox", selectKendoGridRow);

            function selectKendoGridRow() {
                var checked = this.checked,
                    row = $(this).closest("tr"),
                    grid = $('#grid').data("kendoGrid"),
                    dataItem = grid.dataItem(row);

                if (checked) {
                    //-select the row
                    kendoCheckedIds[dataItem.uid] = checked;
                    grid.select(row); // select the item  
                    //row.addClass("k-state-selected");
                } else {
                    //-remove selection
                    delete kendoCheckedIds[dataItem.uid];
                    //row.removeClass("k-state-selected");
                    grid.clearSelection(row);
                }
            }

            $('#btnMarkRed').click(function () {
                var view = dataSource.view();
                var colorClass = 'color-red';
                var grid = $('#grid').data("kendoGrid");

                for (var i = 0; i < view.length; i++) {
                    if (kendoCheckedIds[view[i].uid]) {
                        var row = $("#grid tbody").find("tr[data-uid='" + view[i].uid + "']");
                        row.find(".checkbox").prop('checked', false);
                        $.each(row.find('td'), function (index, element) {
                            $(element).toggleClass(colorClass);
                        });
                        //row.removeClass(otherColorClass).toggleClass(colorClass);
                    }
                }

                grid.clearSelection();
                kendoCheckedIds = {};
            });
        });

$（文档）.ready（函数（）{
var数据源；
var kendoCheckedIds={}；
dataSource=新建kendo.data.dataSource({
类型：“odata”，
运输：{
阅读：“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
页面大小：10
});
$（“#网格”）.kendoGrid({
数据源：数据源，
分组：对，
可排序：是的，
可选：“行”，
可分页：{
刷新：是的，
页面大小：对，
按钮数：5
},
列：[{模板：“”，宽度：30}，
{
字段：“联系人姓名”，
标题：“联系人姓名”，
宽度：200
}, {
字段：“ContactTitle”，
标题：“联系人标题”，
宽度：250
}, {
字段：“公司名称”，
标题：“公司名称”
}, {
字段：“国家”，
宽度：150
}]
})
.数据（“kendoGrid”）
.table.on（“单击“，”.checkbox”，选择KendoGridRow）；
函数selectKendoGridRow（）{
var checked=此项已检查，
行=$（此）.tr，
网格=$（“#网格”）.data（“kendoGrid”），
dataItem=grid.dataItem（行）；
如果（选中）{
//-选择行
kendoCheckedIds[dataItem.uid]=已选中；
grid.select（行）；//选择项目
//row.addClass（“k-state-selected”）；
}否则{
//-删除所选内容
删除kendoCheckedIds[dataItem.uid]；
//row.removeClass（“k-state-selected”）；
网格（世界其他地区）；
}
}
$（'#BTN标记'）。单击（函数（）{
var view=dataSource.view（）；
var colorClass=‘颜色红色’；
var grid=$（“#grid”）.data（“kendoGrid”）；
对于（变量i=0；i

HTML 将选中的项目标记为红色

<div id="grid" style="height: 365px"></div>

CSS

<style>
 td.color-red
    {
        color: red !important;
        font-weight: 700;
    }
</style>

红色
{
颜色：红色！重要；
字号：700；
}

Wow。我一直在玩它，这是一个非常奇怪的。如果我们假设这不是CSS/浏览器错误，那么最有可能的情况是剑道JS库中有某种东西，在该行上的

单击

操作担心样式更改时出现故障。我试图修改它，使类也在TR上，但结果相同。是的，我最初也在TR上有它，因为它太奇怪了，切换到TDs只是为了看看它是否有所不同。只是茫然地使用了旧版本的剑道UI CSS修复了这个问题，但我需要使用最新版本，看看我更新的问题，我添加了另一个提琴，它引用了一个旧版本的剑道UI，你可以看到它的工作原理