javascript - 使用 .live() 和 item.length 绑定(bind)事件失败

Question

我正在为我的网站制作一个小工具提示功能

我的工作完美:(在项目悬停时检查是否存在气泡并显示它。如果不存在，则发出请求，附加气泡然后显示它)

$('.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 工作？

Answer 1

我不会在 .live() 上浪费时间，而是继续使用新的替代品 .on()

.on() 的工作方式类似于直接绑定(bind)到事件，但也类似于实时工作。阅读文档以了解有关如何直接绑定(bind)和“冒泡绑定(bind)”的详细信息。

尝试用 .on() 替换您的 .live()，它们应该可以正常工作。

对于直接绑定(bind)(将处理程序附加到元素):

element.on('event',function(){});

对于“bubble-bind”(注意，element现在是第二个参数，父级被赋予处理程序。子级将被触发，事件将冒泡到父级来处理事件)

someParentElement.on('event','element',function(){});

而且，在使用.on()时，您不必担心this是谁，它始终是您触发的元素，无论是直接触发还是在气泡中。