Div (cuadro de mensaje) no se esconde en el tiempo de ejecución mediante jQuery

Question

Tengo un formulario de inicio de sesión como el siguiente.

<li class="loginlink"> 
    <a id="showlogin" href="#"> 
     <span style="color: #666666">Login</span> 
    </a> 
    <div class="loginbox" style="display: block;"> 
     <fieldset> 
      <label>User Name : </label> 
      <input id="input" type="text" value="" name="input"> 
     </fieldset> 
     <label> 
      <span style="display: inline-block; ...;"> Password :</span> 
     </label> 
     <input id="password_txt" type="password" style="padding:5px;..;" 
       value="" name="password_txt"> 
     <p> 
      <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'), 
        {'j_idt60':'j_idt60'},'');return false" style="color: #666666;.." 
        href="#">Forgot Password? 
      </a> 

      <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'), 
         {'j_idt63':'j_idt63'},'');return false" style="..." 
         href="#">Register 
      </a> 
     </p> 
     <div class="loginbuttons"> 
      <input id="loginBtn" type="submit" value="Login" name="loginBtn"> 
      <input id="cancellogin" type="button" value="Cancel"> 
     </div> 
    </div> 
</li> 

Al hacer clic en showlogin. Yo uso jQuery para mostrarlo. Al igual que

$('#showlogin').click(function(){ 
    var loginBox = $('.loginbox'); 
    loginBox.show(); 
    $('.loginbox fieldset input').focus(); 
    if (!loginBox.is(':hidden')) { 
     validateUser();    
    }   
}); 

$('#cancellogin').click(function(){ 
    $('.loginbox').hide();   
}); 

function validateUser() {  
    $("#loginBtn").click(function(event){ 

     var userName = $("#input").val(); 
     var password = $("#password_txt").val(); 

     if (userName == "") {     
      $.dialog({     
       message: "UserName must be entered", 
       imageIcon: false, 
       type: "error", 
       okButtonID: "ok", 
       okButtonValue: "OK"     
      }); 
      return false;    
     } 
     return true;    
    }); //end of click    
} //end of validateUser() 

Ahora lo que está sucediendo supongo que haga clic en el botón del cuadro se muestra como

Ahora bien, si hago clic en el botón de inicio de sesión, a continuación, aparece el mensaje

Ahora si hago clic en el botón Aceptar. Caja de desaparecer.

Hasta aquí las cosas están bien. Ahora supongamos que cierro el formulario de inicio de sesión haciendo clic en el botón cancelar. Y de nuevo, abra el formulario

Ahora, de nuevo clic en el botón de inicio de sesión. Aparecerá el mensaje

Pero ahora, si hago clic en el botón Aceptar, la superposición se ha ido pero el mensaje no aparece. ¿Por qué? Me sale algo como esto

Por qué esta vez no está desapareciendo? que estoy haciendo mal? ¿Por favor ayuda?

Gracias

Answer 1

Creo que el problema se relaciona con su función validateUser(). Cada vez que muestra el cuadro de inicio de sesión, ve que vincula un nuevo controlador de clics que contiene el código para mostrar el diálogo al botón de inicio de sesión.

function validateUser() {  
    $("#loginBtn").click(function(event){ 
    ... 
    }); 
} 

Esto significa que la segunda vez que se muestra el cuadro de inicio de sesión, el cuadro de diálogo se muestra dos veces. La tercera vez que el cuadro de diálogo se muestra 3 veces. Probablemente no puedas ver esto porque lo estás centrando. Si suelta una función de Javascript alert() después de la línea $.dialog.createUI = function (config) {, verá la segunda vez que se muestra el inicio de sesión, ¡obtiene 2 alertas! Ver fiddle por ejemplo de este problema.

A menos que su código haga otra cosa dentro de la función validar usuario, le sugiero que suelte esta función y en su lugar, vincule la hoja de cálculo cuando el documento esté listo. Así que terminan con algo como esto:

$(document).ready(function() { 

    $("#loginBtn").click(function (event) { 

     var userName = $("#input").val(); 
     var password = $("#password_txt").val(); 

     if (userName == "") { 
      $.dialog({ 
       message: "UserName must be entered", 
       imageIcon: false, 
       type: "error", 
       okButtonID: "ok", 
       okButtonValue: "OK" 
      }); 
      return false; 
     } 
     return true; 
    }); 

    $('#showlogin').click(function() { 
     var loginBox = $('.loginbox'); 
     loginBox.show(); 
     $('.loginbox fieldset input').focus(); 
     // code to call validate user removed from here! 
    }); 

    $('#cancellogin').click(function() { 
     $('.loginbox').hide(); 
    }); 
});