Question

I’m trying to make an automatically disappearing notification box, the notification box is loaded trough ajax so I cannot use the $(document).ready();.

I found the nifty .delegate() function which I’m using extensively, so basically now ajax creates a new <div class="fade">Stupid monkey!</div> and I’d like it to disappear after 2 seconds based on the class definition, this is what I’ve got so far:

// ajax request handler
jQuery('#message').append('<div class="fade">Stupid monkey!</div>');

jQuery('body').delegate('.fade', eventType, function()
{
    jQuery(this).delay(2000).slideUp(500, function()
    {
        jQuery(this).remove();
    });
});

Whatever I replace eventType with I can’t trigger my handler right after I create the element. I’ve tried ready, load and all sorts of alternatives… click works but isn’t what I need and I can’t trigger a click on the anonymous div.

Answer 1

jQuery('body').delegate('.fade', eventType, function()
{
    jQuery(this).delay(2000).slideUp(500, function()
    {
        jQuery(this).remove();
    });
});

jQuery('<div class="fade">Stupid monkey!</div>').appendTo("#message").trigger(eventType);

You can take advantage of chaining. Create the element, append it to your element and then call trigger on the newly added div.