CSS通知消失

Question

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

Answer 1

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
});