How to call a function with jquery blur UNLESS clicking on a link?

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 gotten:

$('.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.

Answer 2

I believe you can use .not('a') in this situation:

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

This isn't tested, so I am not sure if this will work or not.