我正在为我的网站制作一个小工具提示功能
我的工作完美:(在项目悬停时检查是否存在气泡并显示它。如果不存在,则发出请求,附加气泡然后显示它)
$('.profileIcon').hover(function(){
var u = $(this);
var url = $(this).find('a').attr('href')+' #intro_usuario';
if($(this).find('.nube').length>0){
$(this).find('.nube').show();
} else {
//$('<div>').load(url).addClass('nube').css({'left':$(this).offset().left+$(this).outerWidth(true)+15,'top':$(this).offset().top}).appendTo(this).show();
$('<div>').addClass('nube').addClass('nubeU').load(url,function(){
$(this).css({'left':-20,'top':-16}).appendTo(u).show();
});
}
});
它只会在用户第一次悬停时发出请求并附加工具栏 (.nube) div,下次只会显示它(无请求)。
但是使用 ajax 加载更多元素我不得不记忆起来,所以我对使用 live 很犹豫
$('.profileIcon').live('hover',function(){
var u = $(this);
var url = $(this).find('a').attr('href')+' #intro_usuario';
if($(this).find('.nube').length>0){
$(this).find('.nube').show();
} else {
//$('<div>').load(url).addClass('nube').css({'left':$(this).offset().left+$(this).outerWidth(true)+15,'top':$(this).offset().top}).appendTo(this).show();
$('<div>').addClass('nube').addClass('nubeU').appendTo(u).html($('#load').html()).load(url,function(){
$(this) .css({'left':-20,'top':-16}).show();
});
}
});
每次都会完成请求,并且每次都会附加一个额外的气泡
问题是:
¿ 为什么 if($(this).find('.nube').length>0
停止使用 live 工作?
最佳答案
我不会在 .live()
上浪费时间,而是继续使用新的替代品 .on()
.on()
的工作方式类似于直接绑定(bind)到事件,但也类似于实时工作。阅读文档以了解有关如何直接绑定(bind)和“冒泡绑定(bind)”的详细信息。
尝试用 .on()
替换您的 .live()
,它们应该可以正常工作。
对于直接绑定(bind)(将处理程序附加到元素):
element.on('event',function(){});
对于“bubble-bind”(注意,element
现在是第二个参数,父级被赋予处理程序。子级将被触发,事件将冒泡到父级来处理事件)
someParentElement.on('event','element',function(){});
而且,在使用.on()
时,您不必担心this
是谁,它始终是您触发的元素,无论是直接触发还是在气泡中。
关于javascript - 使用 .live() 和 item.length 绑定(bind)事件失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9532334/