Question

我正在写一个简单的工具提示：

$(function() {

$('a').hover(function() {
    var curLink = $(this);
    var toolTipText = curLink.attr('title');
    if (toolTipText)
    {
        var theOffset = curLink.offset();

        $('body').prepend('<div id="toolTip">'+toolTipText+'</div>');           

        // how the heck is this working???
        $('#toolTip').css({
            'left' : theOffset.left+'px',
            'top' : theOffset.top - 30+'px'
        });     
    }   
}, function() {
    $('#toolTip').remove(); 
});

});

正如您所见，当用户将鼠标悬停在链接上时，会动态地将ID为“toolTip”的div添加到DOM中。当DOM加载但稍后添加时，该div最初不存在。所以我假设我必须使用live()函数并附加一个事件。但是，如果我将它视为常规选择器，它会如何工作。不是我在抱怨，但这是如何工作的？

Answer 1

您不需要实时，因为该选择器在元素位于DOM之前不会运行。

将OnMouseOver工具提示添加到DOM中。
Onmouseout选择器运行并从DOM中删除工具提示。它运行正常，因为在调用mouseout函数时，鼠标悬停已经将工具提示添加到DOM中。

如果您附加事件时'live()'元素不在DOM中，则只需要使用<a>。 IE浏览器。在代码执行后添加到页面的任何锚点都没有工具提示。

Answer 2

它的工作原理是因为每次创建元素时都会调用.css（）函数，因此当它触发时元素已经存在。

这个jQuery选择器如何工作？

2 个答案: