php - jquery tooltip not working afer load ajax content -

i use tooltip script showen here: http://www.htmldrive.net/items/show/681/jquery-and-css3-simple-tooltip.html

this use, same few changes:

$(document).ready(function() {          $("body").on("mouseover", ".tip_trigger", function(){             tip = $(this).find('.tip');             $(".tip").html('loding...');             tip.show(); //show tooltip         }, function() {             tip.hide(); //hide tooltip          }).mousemove(function(e) {             var mousex = e.pagex; //get x coodrinates             var mousey = e.pagey; //get y coordinates             var tipwidth = tip.width(); //find width of tooltip             var tipheight = tip.height(); //find height of tooltip           var x = $('.tip_trigger').offset().left;         var y = $('.tip_trigger').offset().top;         mousex = e.pagex - x+180;         mousey = e.pagey - y+105;               tip.css({  top: mousey, left: mousex });             $(".tip").html('loding...');             var idp= this.title;               $('.tip').load("/infopage.php", { id: idp});           });  }); 

the html tip somthing this:

<td style="padding-left:4px;"><a href="#" class="tip_trigger" title="40420549">text<span class="tip"></span></a> txtxtxtxt</td> 

it's work great, problem after load php content ajax script don't work on content came there.

why happen? if there anther way load php content tooltip :)

edit: able live "on" functionality working breaking jquery 3 elements. "on mouseover" "on mousemove" , "on mouseout" - because on function not support multiple definitions hover... had add tip variable declaration each function work:

var tip = $(this).find('.tip');

$(document).ready(function() {      $("body").on("mouseover", ".tip_trigger", function(){         var tip = $(this).find('.tip');         $(".tip").html('loding...');         tip.show(); //show tooltip     });       $("body").on("mouseout", ".tip_trigger", function(){         var tip = $(this).find('.tip');         tip.hide(); //hide tooltip     });       $("body").on("mousemove", ".tip_trigger", function(e){         var tip = $(this).find('.tip');         var mousex = e.pagex; //get x coodrinates         var mousey = e.pagey; //get y coordinates         var tipwidth = tip.width(); //find width of tooltip         var tipheight = tip.height(); //find height of tooltip           var x = $('.tip_trigger').offset().left;         var y = $('.tip_trigger').offset().top;         mousex = e.pagex - x+180;         mousey = e.pagey - y+105;           tip.css({  top: mousey, left: mousex });         $(".tip").html('loading...');         var idp= this.title;           $('.tip').load("infopage.php", { id: idp});      });  }); 

this setup should few steps further along - without php being called ajax @ impass - hope helps

---

what happening here issue new content generated ajax call, new content has not been instantiated jquery functions:

$(".tip_trigger").hover(function(){ ... 

to fix issue want convert jquery .hover trigger either of .on() or .live() functions [depending on version of jquery .live older deprecated function similar .on(). if utilizing recent jquery version, should try .on() first]

something fix issue:

$("body").on("mouseover", ".tip_trigger", function(){ ... 

what translates roughly:

within body of page - on hover event of elements ".tip_trigger" [ regardless of when generated ajax or on document ready] - call said function ...

an important thing note using "body" poor practice, want replace "body" selector specific element exists in document @ time of calling jquery , contains ".tip_trigger" objects create ajax. more specific can here increase performance.