jquery - 如何关注qtip(jquery插件)中的元素

标签 jquery focus qtip qtip2

我正在尝试打开 qtip (v2.0.0) 并让它聚焦于链接——菜单中的第一项。 (更一般地说,我尝试使用这个美妙的 qtip 作为一种上下文菜单,并将焦点放在第一个 li/菜单项上,这样他们就可以方便地按 Enter 键,而不必单击。)所以...

$("tr.request td").qtip({
        content : {
            text: $('#qtipMenu').clone(),
            title : {button : true, text : ' '}
        },
        position : {my : 'bottom center' , at : 'top center'},
        show : {event : 'click'},
        hide : false, 
        events : {
            show : function(){ 
                var selector =  "#"  + this.id + " ul > li:first > a " ;

                // for the sake of experiment...
                $(selector).focus(function(){console.warn("focus on this "+this.tagName + " element!") })
                // and the callback fires, but...
                $(selector)[0].focus(); // doesn't work
                $(selector).focus(); // doesn't work either
                // nor does this:
                $("div.ui-tooltip-content ul > li:first > a").focus();
                // ...though I know I'm definitely addressing this element
                // and can manipulate it in other ways
            },
            render : function(event) {
                $("div.ui-tooltip-content ul").removeAttr('id').show()
            }
        }
    });
}

FWIW,每个 qtip 的内容都是从隐藏的 UL 元素克隆的,因此:

<ul id="qtipMenu" style="display:none" class="qtip-menu">
   <li><a href="admin/requests/view">view details</a></li>
   <li><a href="admin/requests/add">add to schedule</a></li>
   <li><a href="admin/requests/delete">delete</a></li>
</ul>

是的,它被包装在 $(document).ready(function(){}) 中。 “焦点”事件处理程序按预期触发,但浏览器 UI 的实际焦点并未发生(希望我能够清楚地解释自己)。

有什么想法吗?

最佳答案

答案是......在“可见”而不是“显示”上进行。 “可见”发生在“显示”之后

$(myTarget).qtip( {

    events: {
        visible : function() {  $(myElementWithinTheTooltip).focus() }
    }
);

愿它可以帮助其他人减轻几个小时的痛苦。我将留给你们忍者来解释什么内部微妙的时机导致了我的问题。

关于jquery - 如何关注qtip(jquery插件)中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12288507/

相关文章:

php - 使用 PHP 访问 jQuery 节点的子节点及其值以进入数据库

java - 使用 Java (OSX) 设置任何应用程序的焦点?

javascript - 如何刷新 qtip 标签以在悬停时显示特定按钮的新标签?

jquery - 如何使用 jQuery QTip 在鼠标悬停超过 1 秒后显示某些内容

javascript - 如何在 div 中选择某些 HTML 元素

php - 拖放 Div 删除

Android 布局 - ImageView 聚焦,但不在屏幕上显示任何内容(无突出显示)

c# - 在 ListView WPF 中设置项目焦点

javascript - 如何让qtip2响应动态用户输入

asp.net - jQuery 的原生 ajax 函数 vs ajaxDotNet 插件