How do I get jQuery "simple advice" to work on a loaded Ajax page?

I am using a simple jQuery tip code on my site that works like an index page but does not work on external pages that I load via AJAX.

Please see a live example here (Deleted - no longer live). You will see that it works on the category icons, but not on the 5 images in the box below. Although it works when you upload this content yourself. (/featured.html)

I searched here for the topic of using jQuery on loaded AJAX pages and I saw people mentioning:

.live()

      

but I just don't know how to implement it in the tooltip code that looks like this:

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!

+3


source to share


1 answer


I am guessing that binding a simple tooltip again after loading the content with ajax will do the trick



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

      

+1


source







All Articles