jQuery的工具提示不AFER負載Ajax內容

Question

我使用這個工具提示腳本showen在這裏工作： http://www.htmldrive.net/items/show/681/jQuery-and-CSS3-Simple-Tooltip.html

這是我用，同樣有一些變化：

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


     }); 

}); 

與尖端的HTML是這樣的事情：

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

它的工作很好，但問題是，我加載一些PHP內容與AJAX後腳本不工作的內容th從那裏出來。

爲什麼會發生這種情況？ 如果有另一種方法來加載php內容到工具提示這將是太好:)

Answer 1

編輯：能夠通過打破你的jQuery到三個元素獲得活「開」功能工作。一個「ON鼠標懸停」「ON鼠標移動」和「ON鼠標懸停」 - 因爲on函數不支持多個懸停定義...還必須爲每個函數添加一個提示變量聲明，以使其工作：

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}); 

    }); 

}); 

此設置應該讓你幾步進一步沿 - 但沒有你的PHP通過AJAX我在impass被稱爲 - 希望這有助於

---

這裏發生的事情是一個問題通過你的Ajax調用產生的新內容，新內容尚未實例與jQuery函數：

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

要解決，你要轉換的是jQuery的.hover觸發到eith這個問題呃.on（）或.live（）函數[取決於您的jQuery版本.live是較舊的棄用函數，類似於.on（）。如果你正在使用任何最近的jQuery的版本，你應該試試。對（）首先]

像這樣的事情會解決這個問題：

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

什麼這相當於大致是：

內頁面正文 - 關於所有元素的懸停事件「.tip_trigger」[無論它們何時生成，無論它是用ajax還是文檔準備就緒] - 調用所述函數...

需要注意的重要一點是使用「身體」是一個不好的做法，你會想在調用這個jQuery的時候用你文檔中存在的最具體的元素替換這個「body」選擇器，並且它還包含用ajax創建的「.tip_trigger」對象。更具體的你可以在這裏會提高性能。