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

基于你的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会这样做）。

Answer 2

为什么不只是add a delay模糊？为简单起见，还清理了一些代码。

允许单击jQuery表单提示框内的链接

2 个答案: