jQuery - livequery plugin help

Question

I add update messages as table rows when a user changes a radio button. I was running into the fact that once the message was added it didn't have the functionality that I thought it would since it was added after the page was already loaded. Then I found the livequery plugin that seemed to allow elements added after the fact to have the same functionality as elements loaded with the page.

I have the click fadeout() working correctly, but I can't seem to figure out the syntax for setTimeout() on the table row that was just added. I know the current syntax is NOT correct, and I left it at the point where I was frustrated.

<script>
  $(document).ready(function(){  
    $("input[@name='optInOut']").change(function(){
        $('#tblUpdates').append('<tr class="msgUpdate"><td colspan="2">added message0</td><td align="right"><img src="../Images/CCC/12-em-cross.png" class="imgClose" alt="close message" title="close message" /></td></tr>');
    });

    setTimeout($.livequery.function() {  
        $('.msgUpdate').fadeOut('normal');  
        }, 1000); // <-- time in milliseconds
    });

    $('img.imgClose').livequery('click', function(){
        $(this).parent().parent().fadeOut('normal');
  }); 
</script>

If I need to provide more information I will attempt to do so and thanks in advance for your help.

Answer 1

Don't you need to call window.setTimeout? I'm not sure if that is necessary, but it might be worth a try.

Answer 2

With the newest edition of jQuery (1.3.X) you do not need to use the livequery plugin. You can just use $("div").live("click",etc....

I think if you look at the new live function of jQuery you might be able to clean up you Javascript so that it is more understandable.

Answer 3

If the goal with the setTimeout is to fade elements that existed when the page was loaded, then you shouldn't need to involve livequery

setTimeout("$('.msgUpdate').fadeOut('normal');", 1000);

Answer 4

first of all this bit here

     $('img.imgClose').livequery('click', function(){
        $(this).parent().parent().fadeOut('normal');
}); 
</script>

should be

     $('img.imgClose').livequery('click', function(){
        $(this).parent().parent().fadeOut('normal');
     });//<--- closes the livequery call
});//<--- closes document.ready
</script>

secondly, i recommend against livequery for the fadeOut, but if you are going to use it, this syntax:

setTimeout($.livequery.function() {  
        $('.msgUpdate').fadeOut('normal');  
        }, 1000); // <-- time in milliseconds
    });

should be:

$.livequery(function(){
  setTimeout(function(){
     $('.msgUpdate').fadeOut('normal'); 
  },1000);
});