Question

i am making a small tooltip feature for my site

i had this working perfectly: (on item hover check if exists the bubble and shows it. if not, makes a request, appends the buble and then show it)

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

It would only make the request and append the toolip (.nube) div the first time users hover, next times will just show it (no request).

But onload more elements with ajax i’d had to recall it so i tought about using 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();
       });
    }
});

the request is done every time and each time an extra bubble is appended

The question is:

¿ why did if($(this).find('.nube').length>0 stoped working using live?

Answer 1

i’d not waste my time on .live() and move on to the new replacement .on()

.on() works like direct binding to an event, but also works like live. read the documentation for details on how to direct-bind and “bubble-bind”.

try replacing your .live() with .on(), they should work normally.

for direct binding (attach the handler to the element):

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

for the “bubble-bind” (note that element is now the second parameter, and the parent is given the handler. child will be triggered, event will bubble up to the parent to handle the event)

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

also, you need not worry who this is when using .on(), it will always be the element you triggered, be it direct or in bubble.