Reset jQuery events when sending message to user

You have several options. You can add a .stop() like this: $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().stop().fadeIn(); and in this way you stop animations in progress.

$('#id').click(function(){

    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().stop().fadeIn();
    $("#msg").delay(5000).fadeOut();
  
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>

Or you can create a flag that prevents new clicks before this fadeOut is finished. So:

var avisado = false;
$('#id').click(function(){
    if (avisado) return false;
    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn();
    $("#msg").delay(5000).fadeOut(function(){ avisado = false;});
    avisado = true;  
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>

Another option that @wallace suggested is to store this information in the element itself through a .data() property, in which case the code could look like this:

$('#id').click(function () {
    var self = $(this);
    var avisado = self.data('avisado');
    if (avisado) return false;
    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn().delay(5000).fadeOut(function () {
        self.data('avisado', false);
    });
    self.data('avisado', true);
});

jsFiddle: link

Another good way to do it, instead of creating the div dynamically within msg, put #msg as the div itself, hide it and just show it in the click. I'd rather do it on the display: none of the css, but you can do it by jQuery's hide () function.

HTML:

<a href="#" id="id" class="btn">alerta</a>
<div id="msg" class="alert alert-success"> ALERTA </div>

CSS:

#msg{
display:none;
}

jQuery:

$('#id').click(function(){
   $("#msg").show().delay(2000).fadeOut();
});