如何在没有单击链接的情况下使用jquery模糊调用函数？

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

This is how I ended up doing it:

var curFocus;
    $(document).delegate('*','mousedown', function(){
        if ((this != curFocus) && // don't bother if this was the previous active element                
            ($(curFocus).is('.field')) && // if it was a .field that was blurred
            !($(this).is('.adress'))
        ) {
            $('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
        }

        curFocus = this; // log the newly focussed element for the next event
    });

Answer 3

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.