Bộ chọn jQuery này hoạt động như thế nào?

Question

Tôi viết một tooltip đơn giản:

$(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(); 
}); 

}); 

Như bạn có thể thấy một div với id của "tooltip" là tự động thêm vào DOM khi dùng di chuột qua một liên kết. Đó là div không có ban đầu khi DOM tải nhưng được thêm vào sau. Vì vậy, tôi giả sử tôi đã phải sử dụng chức năng live() và đính kèm một sự kiện vào nó. Nhưng một số cách nó hoạt động nếu tôi chỉ coi nó như một bộ chọn thông thường. Không phải là tôi phàn nàn nhưng làm thế nào mà nó hoạt động?

Answer 1

Bạn không cần trực tiếp vì bộ chọn đó không chạy trước khi phần tử nằm trong DOM.

• Chú giải công cụ OnMouseOver được thêm vào DOM.
• Onmouseout bộ chọn chạy và chú giải công cụ được xóa khỏi DOM. Nó hoạt động tốt bởi vì khi chức năng mouseout được gọi là chú giải công cụ đã được thêm vào DOM đã được di chuyển qua đó.

Bạn chỉ cần sử dụng 'live()' nếu phần tử <a> của bạn chưa có trong DOM khi bạn đính kèm sự kiện. I E. Bất kỳ neo nào được thêm vào trang của bạn sau khi mã thực thi sẽ không có chú giải công cụ.

Answer 2

Nó hoạt động vì bạn gọi hàm .css() SAU mỗi lần bạn tạo phần tử, vì vậy khi nó kích hoạt phần tử đã tồn tại.