I came across a question asking how to fade out Bootstrap alerts after 5 seconds, and the answer was the following code. The issue is, it only works once, however as I have multiple alerts that are generated after an AJAX call this is no good. How do I make the following code run every time an alert is triggered?

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
          $(this).remove(); 
     });
}, 5000);

I came across a question asking how to fade out Bootstrap alerts after 5 seconds, and the answer was the following code. The issue is, it only works once, however as I have multiple alerts that are generated after an AJAX call this is no good. How do I make the following code run every time an alert is triggered?

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
          $(this).remove(); 
     });
}, 5000);

• javascript
• jquery
• twitter-bootstrap

• Show the code where "alerts are generated after an AJAX call", that's where you'll want to put the code to hide them. – No Results Found Commented Aug 19, 2013 at 2:38

2 Answers 2

One possible solution is to use a custom event showalert after the alert is shown and in the event handler remove the alert

$(document).on('showalert', '.alert', function(){
    window.setTimeout($.proxy(function() {
        $(this).fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, this), 5000);
})  

and

$('<div class="alert alert-error">' + 'some message' + '</div>').appendTo('#result').trigger('showalert');

Demo: Fiddle

I think it is because $(this).remove(); removes the alert from the DOM. You can actually just modify the content without regenerating the alert every time after the AJAX call.