Question

I’m using the ‘simple tip‘ jQuery tooltip code on my site, which is working as it should on the index page but is not working on external pages I’m loading via AJAX.

Please see the live example here (Removed – no longer live). You will see it is working on the category icons, but not on the 5 images in the box below. Though it works when you load this content independently. (/featured.html)

I’ve searched here on the subject of using jQuery on AJAX loaded pages and I’ve seen people mentioning:

.live()

but I just don’t know how to implement it into the tooltip code, which is as follows:

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
    $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
    var my_tooltip = $("#"+name+i);

    if($(this).attr("title") != ""){ // checks if there is a title

    $(this).removeAttr("title").mouseover(function(){
            my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(50);
    }).mousemove(function(kmouse){
            my_tooltip.css({left:kmouse.pageX-15, top:kmouse.pageY+30});
    }).mouseout(function(){
            my_tooltip.fadeOut(50);
    });

    }
});
}

$(document).ready(function(){
 simple_tooltip("a","tooltip");
});    

Would anyone be kind enough to point me in the right direction?

Thanks in advance!

Answer 1

I guess, binding the simple tooltip again after loading the content using ajax will do the trick

 $("#youdDiv").load("serverpage.php",function(){
    simple_tooltip("a","tooltip");
  });