IE not firing $.post() / .html() calls correctly

I have a piece of jquery code that isn't firing correctly in IE (8 or 9 - although in 9, if I drop out of compatibility mode it works fine) It works fine in Firefox, chrome, opera & safari...

$('.add-event').live('click', function(){
    $('#list').slideUp(1000);
    var date = ($(this).attr('alt'));
    setTimeout(function(){
        $.post("inc/calmod.php", {'sender': 'sent', 'date': date}, function(data){
            $('#change').css({'display': 'none'}).html(data).slideDown(1000);
        }); 
    }, 400);
});

In the html, #list is a section within the div #change:

<section class="grid_4" id="change">
    <div class="block-border" id="list">
         {...}
    </div
</section>

the ajax call runs through various db calls and eventually outputs a bit of html to go in the div. At the moment in IE, the slideUp call runs, but then nothing comes back in it's place.

I have added alerts to 开发者_开发问答test that the data variable is outputting - the correct info is passing through the $.post() call.

I have replaced the .html(data) with a text string (.data('test')) - the test string appears where I would expect it to.

It seems like the data isn't making it into the $('#change').html(data). I've tried breaking this line into two separate commands and still no joy.

Any suggestions for what to try next?

Have you tried using $.ajax() instead of $.post()? I've never had any problems with it on IE.

Strange. I suspect one of the 2 following things is happening:

1) You're .slideUp() hasn't finished when you try to hide your div

or

2) the display:none isn't working.

This would fix both problems, please try:

setTimeout(function(){
    $.post("inc/calmod.php", {'sender': 'sent', 'date': date}, function(data){
        $('#change').hide().html(data).slideDown(1000); //Use .hide()
    }); 
}, 1000); //The delay should be at least equal to the slideUp time

Hope this fixes your problem. Cheers