jquery - Login/Sign Up Transition Error -


i having trouble login overlay transitions. works fine, when click on "forgot password?", click on "suddenly remembered? login here", closes overlay instead of going login overlay.

jquery

$(document).ready(function () {     $login = $("#loginlink");     $loginclose = $(".close");     $signin = $("#signlink");     $signinclose = $(".closesign");      $login.click(function (event) {         event.preventdefault();         $(".login_overlay").fadetoggle("fast");         $(".signin_overlay").hide();     });      $loginclose.click(function (event) {         $(".login_overlay").hide();     });      $(".forgot").click(function (event) {         event.preventdefault();         $(".forgot-password-overlay").fadetoggle("fast");         $(".login_overlay").hide();     });      $(".linkregister").click(function (event) {         event.preventdefault();         $(".signin_overlay").fadetoggle("fast");         $(".login_overlay").hide();     });      $signin.click(function (event) {         event.preventdefault();         $(".signin_overlay").fadetoggle("fast");         $(".login_overlay").hide();     });      $signinclose.click(function (event) {         $(".signin_overlay").hide();     });      $(".linklogin").click(function (event) {         event.preventdefault();         $(".login_overlay").fadetoggle("fast");         $(".signin_overlay").hide();     });      $(this).click(function (event) {         if (!$(event.target).closest('.login-wrapper, #loginlink, .sign-wrapper, #signlink, .forgot-password-wrapper').length) {             $(".login_overlay, .signin_overlay, .forgot-password-overlay").hide();          }     });  }); 

https://jsfiddle.net/tn212b6x/

the issue lies function :

    $(".forgot").click(function (event) {         event.preventdefault();         $(".forgot-password-overlay").fadetoggle("fast");         $(".login_overlay").hide();     }); 

when click on "suddenly remembered? login here", fires click handler since div inside .forgot.

now handler hides .login_overlay.

there many ways solve it 1 such way give form other class-name other .forgot.

<form method="post" class="forgot-form"> 

and modify .login-click handler

    $(".linklogin").click(function (event) {         event.preventdefault();         $(".login_overlay").fadetoggle("fast");         $(".forgot-password-overlay").hide();         $(".signin_overlay").hide();     }); 

check out working here - https://jsfiddle.net/drecodeam/tn212b6x/3/


Comments