我在表格顶部添加了一个 div 元素,其中包含当用户单击某些文本时通过 ajax 获得的一些信息。我需要在用户点击的记录后直接显示信息。它在内部使用,所以我只需要支持 chrome 和 IE9。Chrome 正在做它需要做的事情,但 IE9 不喜欢它。
我使用 jQuery 的 .after 函数将 div 直接放在用户单击的表格行之后。两种浏览器都将 div 放在它应该去的地方,但 IE9 不会将任何 css 应用于新元素。
<table>
<tr><td>blahblah1</td><td class="secondRow">secondRow1</td><td class="thirdRow">thirdrow1</td></tr>
<tr><td>blahblah2</td><td class="secondRow">secondRow2</td><td class="thirdRow">thirdrow2</td></tr>
<tr><td>blahblah3</td><td class="secondRow">secondRow3</td><td class="thirdRow">thirdrow3</td></tr>
<tr><td>blahblah4</td><td class="secondRow">secondRow4</td><td class="thirdRow">thirdrow4</td></tr>
<div class="ajaxedInfo">control group</div>
<tr><td>blahblah5</td><td class="secondRow">secondRow5</td><td class="thirdRow">thirdrow5</td></tr>
</table>
$('.secondRow').click(function(){
$('.ajaxedInfo').remove();
$('.inlineCSS').remove();
$(this).parent().after('<div class="ajaxedInfo">ajaxed info coming in about</div>');
});
$('.thirdRow').click(function(){
$('.ajaxedInfo').remove();
$('.inlineCSS').remove();
$(this).parent().after('<div class="inlineCSS" style="position:absolute;background:#c6c6c6;">inline css doesn\'t work either</div>');
});
.secondRow
{
cursor:pointer;
border:1px solid black;
}
.thirdRow
{
cursor:pointer;
}
.ajaxedInfo
{
position:absolute;
background:#cccccc;
width:300px;
text-align:center;
border:1px solid black;
}
这是我一直在玩的一个小提琴,它演示了 http://jsfiddle.net/QyUwA/4/ 这将在 Chrome 中按我想要的方式工作,而不是在 IE9
我环顾四周,似乎 IE7 做类似的事情有很多问题。人们建议重新绘制元素。我试过隐藏,然后在添加 div 后显示它,但这没有帮助。