Разрешить нажатие на ссылку в окне подсказки формы jQuery

Question

В моей форме запущен простой инструмент подсказки jQuery. Моя проблема заключается в том, что подсказка отключается, когда пользователь щелкает в поле ввода (при размытии).Когда пользователь щелкает ссылку внутри поля подсказки, он «размывает» поле ввода, , поэтому поле исчезает, прежде чем перейти по ссылке, поэтому ссылка никогда не переходит.

Edit: вот jFiddle, показывающий мою проблему с кодом http://jsfiddle.net/9pJvp/

Основной код jQuery выглядит следующим образом:

$(":input").focus(function() {
    $(this).parent().find("span:nth-child(4)").css('display','inline');
})
$(":input").blur(function() {
    $(this).parent().find("span:nth-child(4)").css('display','none');
})

Пример кода формы, который применяет это выглядит следующим образомэто (подсказка вся в стиле css):

<tr class="form_row">
    <td class="required_label">
        Example Label:
    </td>
    <td class="input_field">
        <input type="checkbox" value="1" name="blah" />
        <div style="display: inline;"></div>
        <span class="validation_message"></span>
        <span class="hint">
            Blah blah blah <a href="http://www.google.com">heres a link.</a>
            <span class="hint-pointer"></span>
        </span>
    </td>
</tr>

Я попытался добавить следующее (и его варианты) как внутри .blur(function() {, так и вне его, но ни одинработает. Есть предложения?Спасибо!

$("a").click(function() {
        e.preventDefault(); 
        e.stopPropagation();
    });

Answer 1

Почему бы просто не добавить задержку для размытия?Также немного упростили ваш код для простоты.

Answer 2

На основе вашего jsfiddle:

$(document).ready(function() {
    var timer = null;
    $(".input_field input, .input_field a").focus(function() {
        var self = this;
        setTimeout(function(){
            $(self).closest(".input_field").find("span:nth-child(4)").css('display','inline');
        },3);
    }).blur(function() {
        var self = this;
        timer = setTimeout(function(){
            $(self).closest(".input_field").find("span:nth-child(4)").css('display','none');
        }, 2);
    }).filter("a").bind("focus mousedown", function(e){
        var self = this;
        clearTimeout(timer);
        setTimeout(function(){
            clearTimeout(timer);
            self.focus();
        }, 1);
    });

});

Скрипка: http://jsfiddle.net/9pJvp/3/

Это что-то вроде хака, и, возможно, есть лучший способ.

Возможно, вам придется увеличить интервалы setTimeout до 15, 30 и 45 (или выше) - я не много тестировал и не слишком уверен, что все браузеры будут запускать их правильный порядок (Chrome делает).