jquery - 允许单击 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

基于您的 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);
    });

});

fiddle :http://jsfiddle.net/9pJvp/3/

这有点麻烦，可能有更好的方法。

您可能需要将 setTimeout 间隔增加到 15、30 和 45(或更高) - 我没有进行太多测试，也不太确定是否所有浏览器都会以正确的顺序触发它们(Chrome 会)。