Как, черт возьми, работает этот селектор 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(); 
});

});

Как видите, div с идентификатором "toolTip" динамически добавляется в DOM, когда пользователь наводит курсор на ссылку. Этот div изначально отсутствует при загрузке DOM, но добавляется позже. Поэтому я предположил, что должен был использовать функцию live() и прикрепить к ней событие. Но кое-как это работает, если я просто рассматриваю это как обычный селектор. Не то чтобы я жалуюсь, но как это работает?

Answer 1

Вам не нужен live, потому что этот селектор не запускается до того, как элемент находится в DOM.

• Подсказка OnMouseOver добавлена ​​в DOM.
• Включите этот селекторзапускается и подсказка удаляется из DOM.Он работает нормально, потому что к тому времени, когда функция mouseout вызывается, подсказка уже была добавлена ​​в DOM при наведении мыши.

Вам нужно будет использовать 'live()', только если ваш элемент <a> не былеще не в DOM, когда вы прикрепляете события.IE.Любые привязки, добавленные на вашу страницу после выполнения этого кода, не будут иметь всплывающих подсказок.

Answer 2

Это работает, потому что вы вызываете функцию .css () ПОСЛЕ каждого раза, когда создаете элемент, поэтому при запуске элемент уже существует.