CODEWITHSUNDEEP
javascriptjquery
lipenco
lipenco

Reputation: 1368

hiding element on blur, when it is shown

I don't understand why my function is not working. It is showing up the login form, but when I blur (click somewhere else than the form) it is not hiding.

here is my buggy code:

$(document).on('click', '#login-btn', function(){ 
      var $form = $("#login");
      $form.show("slow" );
      $("#login").on('blur', function (){
        $form.hide("slow");
       });      
 });

Upvotes: 0

Views: 60

Answers (2)

Venkata Krishna
Venkata Krishna

Reputation: 15112

You probably do not want this blur to be handled only when click event gets fired. Move the blur event out of the click event

var $form = $("#login");    
$(document).on('click', '#login-btn', function(){ 
    $form.show("slow" );  
    $('#loginUsername').focus(); 
});
$form.on('focusout', function (){
    $form.hide("slow");
});

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

You can do this:

var $form = $("#login");
$(document).on('click', '#login-btn', function () {    
    $form.show("slow");
}).on('blur', '#login', function () {
    $form.hide("slow");
});

Upvotes: 0

Related Questions