Simple way to check if input is in focus and to disable mouseleave function if true

Question

I have to admit that I'm definitely no jQuery genius but what seems like asimple solution has just totally eluded me.

Basically I have a drop down script working on a nested ul to display on rollover of its parent. In one of the nested ul I have a form that I would like to stop the mouseleave event if any of the inputs in the form are being entered into.

Here's the original code:

$(document).ready(function() {  

/*------- navigation -------*/
$('.top_menu li').hover(function(){
    var index = $('.top_menu li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});
$('.top_menu li').mouseleave(function(){
        $(this).children('ul').hide();
}); 


$('.login_cart li,.login_cart_captu li').hover(function(){
    var index = $('.login_cart li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});

$('.login_cart li,.login_cart_captu li').mouseleave(function(){

        $(this).children('ul').hide();

});

}); 

I'm really only concerned with the .login_cart li portion of the script - that's the only one that has the form within it.

I've tried with a simple if/else statement to not hide if an input has focus but that hasn't worked so far.

Any help anyone could give me or to shed some light on this would be absolutely wonderful.

Thanks in advance!

Answer 1

you can bind the focus event of the form elements to a function that unbinds the mouseleave event from the .login_cart li:

$("#<form-id> input").focus(function() {
    $(".login_cart li, .login_cart_captu li").unbind("mouseleave");
}

You'll just have to replace with the id of your form or you can use whatever selector you want to select your form.