使用JQuery删除浏览器重绘Bug的解决方法DeleteClass

我在我的web应用程序中有一个表，并且我已经实现了一个事件处理程序，以允许用户通过单击表中的一行来选择数据元素。为了突出显示选定的元素，我给它一个边框。当选择一个新行时，我从旧元素中移除选定的类（边框）并将其添加到新元素中。使用JQuery删除浏览器重绘Bug的解决方法DeleteClass

我的事件侦听器代码似乎工作正常。我已经验证了使用chrome的开发人员工具，该类正在从旧元素中删除并添加到新选定的元素中。但是，在调用removeClass（）后，浏览器无法正确删除边框。

在铬（18.0.1025.151）中进行测试时，新选定的元素将显示一个边框，并且之前选定的元素仍显示边框的一部分（边框的底部和右部仍处于绘制状态）。当我在FF 11中测试时，会出现类似的绘图错误。在Firefox中，新选择的行只绘制顶部不显示的边框的左/右/底部分。导致重绘的事件（例如调整浏览器窗口大小）可修复边框绘制问题。

有没有人有问题的原因的信息/链接。更重要的是，在用户选择了新行后，我可以实施哪种解决方法？

CSS类被添加/移除

.uiSelectedLHPlanRow { border: 1px solid purple; }

HTML

<table id='lhPlansTable' class='uiLHPlansTable'> 
</table>

（表行被动态地添加）TR格式：

'<tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'><td class=\'uiLHPlanDriverTableCell\'>' + GENERATED DATA1 + '</td><td>' + GENERATED DATA2 + '</td></tr>'

EVENT HANDLER

$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function() { 

    ... flow control ... 

    $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow'); 
    $(this).addClass('uiSelectedLHPlanRow'); 


    // TODO: WORKAROUND FOR DRAWING BUG ?? 
}

来源

2012-04-09 Ryan Thomas

这就要求工作[的jsfiddle]（http://jsfiddle.net）。 – Blazemonger 2012-04-09 16:24:53

http://jsfiddle.net/T2saA/1/ – 2012-04-09 16:29:43

看起来像border-collapse;的问题。如果你明确地设置了border-collapse:separate;它似乎更好（尽管你可能需要调整你的样式）。设置为border-collapse:collapse;会导致问题返回。

实施例：http://jsfiddle.net/T2saA/3/

CSS

tr.uiSelectedLHPlanRow > td { 
    border-top: 1px solid purple; 
    border-bottom: 1px solid purple; 
} 

table.uiLHPlansTable{ 
    border-collapse:separate; 
}

来源

2012-04-09 16:42:48

非常感谢您的帮助。我用我的网络应用程序进行了测试，并确认此解决方案解决了Chrome 18和ff 11的问题。 – 2012-04-09 17:12:57

@RyanThomas - 很高兴我能够提供帮助。有关投票和标记正确答案，请参阅此部分（http://stackoverflow.com/faq#howtoask）。 – 2012-04-09 17:27:44

使用JQuery删除浏览器重绘Bug的解决方法DeleteClass

回答

相关问题