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