Question

I have a small jQuery script:

$('.field').blur(function() {
    $(this).next().children().hide();
});

The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?

This is as close as I have got:

$('.field').blur(function() {
       $('*').not('.adress').click(function(e) {
            foo = $(this).data('events').click;
            if(foo.length <= 1) {
//             $(this).next('.spacer').children().removeClass("visible");
            }
            $(this).unbind(e);
        });
});

The uncommented line is suppose to refer to the field that is blurred, but it doesn’t seem to work. Any suggestions?

Answer 1

You can give it a slight delay, like this:

$('.field').blur(function() {
  var kids = $(this).next().children();
  setTimeout(function() { kids.hide(); }, 10);
});

This gives you time to click before those child links go away.