允许单击jQuery窗体提示框中的链接

Question

我正在表单上运行一个简单的jQuery提示工具。，我的问题是，当用户单击输入字段(在模糊上)时，提示被设置为消失。当用户单击“提示”框内的链接时，他们“模糊”了输入字段，因此在跟随该链接之前，该框将消失，因此该链接永远不会被遵循。

编辑:这里有一个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

根据你的弹琴：

$(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确实如此)。

Answer 2

为什么不只是模糊的加一个延迟呢？为了简单起见，还稍微清理了一下代码。