Message with Delay in Jquery

Question

I have the following code:

if(oper == 1) {
  $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 0)' value='Excluir' class='BT_Vermelho'>");
  //alert("Documento Incluído com Sucesso!");
  $(".MsgRetorno").html("<P style='margin:0; color:green;'>Documento Incluído com Sucesso!</P>");
  $(".MsgRetorno").fadeOut(1000);
}
else
{
  $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 1)'  value='Incluir' class='BT_Verde'>");
  //alert("Documento Excluído com Sucesso!");
  $(".MsgRetorno").html("<P style='margin:0; color:red;'>Documento Excluído com Sucesso!</P>");
  $(".MsgRetorno").fadeOut(1000);
}

It is a list with delete button that turns include and vice versa. It turns out that it only appears once... After fadeOut() it doesn’t appear again when I click on the buttons. I’m a beginner in Jquery.

Can anyone tell me why?

Answer 1

Use the callback of the method fadeOut. When you do the fadeOut, to div is permanently hidden. It needs to be emptied and restored before making a new fadeOut.

Example based on your code:

idcontrato = iddoc = 1;
oper = 1;
function AddExcDocCPS(){

    // cancela se algum fade estiver ocorrendo
   $(".MsgRetorno")
   .stop(true, true)
   .html("")
   .show();

   
   if(oper == 1) {
      idcontrato = iddoc = 1;
      oper = 2;
     $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 0)' value='Excluir' class='BT_Vermelho'>");
     //alert("Documento Incluído com Sucesso!");
     $(".MsgRetorno")
     .html("<P style='margin:0; color:green;'>Documento Incluído com Sucesso!</P>")
     .fadeOut(1000, function(){ // callback
         $(this)  // seleciona a própria div
        .html("") // esvazia ela
        .show();  // mostra a div. Como ela está vazia, nada irá aparecer
     });
   }
   else
   {
      idcontrato = iddoc = 1;
      oper = 1;
     $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 1)'  value='Incluir' class='BT_Verde'>");
     //alert("Documento Excluído com Sucesso!");
     $(".MsgRetorno")
     .html("<P style='margin:0; color:red;'>Documento Excluído com Sucesso!</P>")
     .fadeOut(1000, function(){
         $(this)
        .html("")
        .show();
     });
   }
}

AddExcDocCPS();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="op1"></div>
<div class="MsgRetorno"></div>