这个jQuery选择器如何工作？

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()'如果<a>元素不在DOM中,您才需要使用.IE浏览器.执行该代码后添加到页面的任何锚点都没有工具提示.