Html 在jQuery拖放后CSS没有正确更新，但在Inspector中没有

我有一个奇怪的问题，下面黑色容器中的项目被拖到上面的网格中。但是，这些项目具有这种不透明度/橙色外观。单元的结构有一个容器和其中的项目。容器单元格悬停时有橙色背景，但如果我将单元格从黑色容器快速向上移动到网格中，则悬停不会显示它工作正常

现在它里面的物品有一个叫做“show game”的类。如果我在Web Inspector中将不透明度从1切换到0，然后再切换回1，我将获得所需的A1和A4外观

我的Chrome浏览器有问题吗？这种情况在IE中没有发生。似乎这种风格没有得到更新

<td class="item-container draggable-item-container clearfix ui-droppable">
                            <div data-tooltip="" class="item clearfix draggable-active draggable-item show-game ui-draggable tooltip-init" style="background-color: rgb(255, 55, 108);" data-bind="draggableCss: { disabled: $data.Disabled(), matchup: $data.Matchup, invalid: $data.Invalid, current: $data.Current }, draggableGameHandler : { disabled: !$data.Matchup, disabledDrop: $data.Disabled() }, delegatedClick: $root.members.eventSchedule.editGame.open.bind($data, true, ($data.Matchup && $data.Matchup.Type == '@((int)ScheduleType.Pool)'), $parent.Games)">

                            </div>
                        </td>



ko.bindingHandlers.draggableCss = {
        update: function (element, valueAccessor) {

            var values = valueAccessor();

            $(element).toggleClass('ui-droppable-disabled', values.disabled);
            $(element).toggleClass('hide-game', (!values.matchup || !values.matchup.Selected()));
            $(element).toggleClass('show-game', (values.matchup && values.matchup.Selected()) ? true : false);
            $(element).toggleClass('empty', !values.matchup);
            $(element).toggleClass('expand', viewModel.showTeams());

            if (values.editable) {
                $(element).addClass('editable-game');
            }

            if (values.matchup) {

                if (values.matchup.Selected()) {
                    $(element).removeClass('occupied', false);
                }

                if (values.invalid && values.invalid()) {
                    updateElementColors(element, values.matchup.Color, 'invalid');
                }
                else if (values.current && values.current()) {
                    updateElementColors(element, values.matchup.Color, 'current');
                }
                else  {
                    updateElementColor(element, values.matchup.Color, false);
                }

                if (values.matchup.CrossGame)
                    $(element).addClass('cross-game');


            } else if (values.invalid && values.invalid() && !values.disabled) {
                updateElementColors(element, null, 'invalid');
            } else {
                $(element).removeClass('invalid').removeClass('current');
            }
        }
    };

ko.bindingHandlers.draggableCss={
更新：函数（元素、值访问器）{
var values=valueAccessor（）；
$（元素）.toggleClass（'ui-droppable-disabled'，values.disabled）；
$（元素）.toggleClass（'hide-game'，（！values.matchup | |！values.matchup.Selected（））；
$（element）.toggleClass（'show-game'，（values.matchup&&values.matchup.Selected（））？true:false）；
$（元素）.toggleClass（'empty'，！values.matchup）；
$（element.toggleClass（'expand'，viewModel.showTeams（））；
如果（值。可编辑）{
$（元素）.addClass（'editable-game'）；
}
if（值匹配）{
if（values.matchup.Selected（））{
$（element.removeClass（'已占用'，false）；
}
if（values.invalid&&values.invalid（））{
UpdateElementColor（元素，values.matchup.Color，“无效”）；
}
else if（values.current&&values.current（））{
UpdateElementColor（元素，values.matchup.Color，“当前”）；
}
否则{
updateElementColor（元素，values.matchup.Color，false）；
}
if（值、对局、交叉游戏）
$（element.addClass（'cross-game'）；
}else if（values.invalid&&values.invalid（）&&values.disabled）{
UpdateElementColor（元素，null，'invalid'）；
}否则{
$（元素）.removeClass（'invalid'）.removeClass（'current'）；
}
}
};

---

如果您正在使用google chrome，请打开“检查”选项卡，然后打开“计算”选项卡。您应该可以看到应用于此元素的所有css及其设置位置

检查“隐藏”css覆盖规则

---

如果要避免重写，请尝试css规则中的“！important”标记。

如果显示jquery，将非常有用。因此，当您检查检查器中错误显示的元素时，其中列出的计算样式是正确的，但与页面上的实际样式不匹配？准确地说，我触摸任何样式，甚至移动网格中的另一个单元格，它会自动修复。@MikeFlynn如果你创建一个提琴，它会更有用。我无法为此创建一个提琴，因为有很多事情正在进行和安全进行。