这个 jQuery 选择器到底是如何工作的？
我正在编写一个简单的工具提示：
$(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() 函数并向其附加一个事件。但如果我只是将其视为常规选择器，它会如何工作。不是我在抱怨，而是这是如何运作的？
I am writing a simple tooltip:
$(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();
});
});
As you can see a div with the id of "toolTip" is dynamically added to the DOM when a user hovers over a link. That div isn't there initially when the DOM loads but is added later. So I assumed I had to use the live() function and attach an event to it. But some how it works if I just treat it as a regular selector. Not that I'm complaining but how is this working?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不需要 live，因为该选择器在元素进入 DOM 之前不会运行。
如果附加事件时
元素尚未在 DOM 中，则只需使用'live()'即可。 IE。代码执行后添加到页面的任何锚点都不会有工具提示。You don't need live because that selector doesn't run before the element is in the DOM.
You would only need to use
'live()'if your<a>element wasn't in the DOM yet when you attach the events. IE. Any anchors added to your page after that code executes won't have tooltips.它之所以有效，是因为您在每次创建元素后调用 .css() 函数，因此当它触发时，该元素已经存在。
It works because you call the .css() function AFTER each time you create the element, so when it fires the element already exists.