Question

我在表格顶部添加了一个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之后显示div，但这没有帮助。

Answer 1

改为使用表格行。

像这样：

$(this).parent().after('<tr class="ajaxedInfo"><td colspan="3">ajaxed info coming in about</td></tr>');

http://jsfiddle.net/QyUwA/4/

- 以示例编辑。

IE9没有使用jQuery.after将css应用于动态创建的元素

1 个答案: