Question

I am using jQuery to show and hide a div by adding/removing a class to it.

$('input').focus(function(){
    $(this).parents('.row').addClass("linksdiv");
}).blur(function(){
    $(this).parents('.row').removeClass("linksdiv");
});

It works quite well when focusing on inputs, but if I click a link in linksdiv it loses focus and the div disappears. Would it be better to use show() and hide() for the linksdiv than to depend on css?

Would that allow the div to be clickable when inputs are focused? Or is there a simple work around to keep linksdiv from losing focus when clicked but still have it disappear on blur?

Thanks again in advance! You folks are fantastic!

I am sorry I couldn’t describe very well what i was trying to do this is it http://jsfiddle.net/Zw5c2/5/ Thanks Patrick for the resource!

Answer 1

@Nick is right, there won’t be a clean solution.

One possibility is to delay the code in your blur so that your link’s click handler has a chance to send the focus back to the input.

http://jsfiddle.net/Zw5c2/

var lastInput;
var timeout;
$('input').focus(function() {
    var $th = $(this);
    lastInput = $th;
    clearTimeout(timeout);
    $th.parents('.row').addClass("linksdiv");
}).blur(function() {
    var $th = $(this);
    timeout = setTimeout(function() {
        lastInput = null;
        $th.parents('.row').removeClass("linksdiv");
    }, 150);
});

$('.link').click(function() {
    lastInput.focus();
    // run your code for the link
});

Another solution may be to make it so that the link is actually an input. Just style it to make it look like a link, and prevent any change to the text.

http://jsfiddle.net/Zw5c2/1/

Neither solution is perfect.

A change to implementation may be better.