CSS通知消失

Im creating a small web app and I have used AJAX in a few functions such a creating and deleting certain objects.

To notify the user I have used PHP to echo a HTML notification on to the screen depending on weather the object was successfully created or not.

if ($query) {
 //response to ajax call if successful
  echo '<div class="alert alert-success"><a class="close" data-dismiss="alert">×</a><h4 class="alert-heading">Success!</h4>Object Added!</div>';

}

The problem is, over time the notifications build up on the screen as there is no refresh to remove them.

I have a jQuery function that can remove the alerts every 5 seconds shown below

function clearAlerts(){
        setTimeout(function() {
            $('.alert').fadeOut('fast');
        }, 5000);
    }

But I dont know how to call this function every time a notification is added to the page, is there anyway to use jQuery to perhaps detect when a notification has been echoed on to the page, or to run this jQuery function each time they are added.

Thanks

Put this tag directly inside each HTML snippet you are generating, you can style it in any way you like:

<span class="close-notification">Close</span>

Then use this piece of JS to remove it when clicked.

$(document).on('click', '.close-notification', function(){
    $(this).parent().fadeOut(); // could use .remove(), .slideUp() etc
});

What you want is possible, by jQuery. First, add a class to the notification div, for example:

<div class="notification">Notification</div>

Then this jQuery:

$(".notification").live("ready", function(){
                $(".notification").setDelay(5000).fadeOut("slow");
            });