IE9 isn't applying css to dynamically created elements using jQuery.after

Question

I'm adding in a div element on top of a table with some info that I get through ajax when a user clicks on some text. I need to show the information directly after the record the user clicked on. It's in house use so I only need to support chrome and IE9. Chrome is doing what it needs to but IE9 doesn't like it.

I use jQuery's .after function to put the div in directly after the table row the user clicked on. Both browsers put the div where it should go but IE9 doesn't apply any of the css to the new elements.

 <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;
}

here is a fiddle that i've been playing with that demonstrates http://jsfiddle.net/QyUwA/4/ This will work how I want it to in Chrome just not IE9

I've looked around and there seems to be lots of problems with IE7 doing similar things. People suggest redrawing the elements. I've tried hiding and then showing the div after it has been added but that didn't help.

Answer 1

Use a table row instead.

Like this:

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

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

--Edited with example.