jquery - 这个 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

您不需要 live，因为该选择器在元素进入 DOM 之前不会运行。

• OnMouseOver 工具提示已添加到 DOM 中。
• 鼠标移开时，选择器将运行，工具提示将从 DOM 中删除。它工作得很好，因为当调用 mouseout 函数时，工具提示已经通过鼠标悬停添加到了 DOM 中。

您只需要使用 'live()'如果您<a>当您附加事件时，元素尚未在 DOM 中。 IE。代码执行后添加到页面的任何 anchor 都不会有工具提示。