JQuery подсказка не работает АВЭСОМ содержания нагрузки АЯКСА

Question

Я использую эту подсказку скрипт, который результаты сделанные здесь: 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, с наконечником Somthing так:

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

это работа большой, но проблема в том, что после того, как я загрузить некоторые содержимое PHP с AJAX скрипт не работает на го контента пришло оттуда.

Почему это происходит? Если есть другой способ загрузить php-контент в всплывающую подсказку, это тоже будет хорошо :)

Answer 1

EDIT: удалось получить функциональность «on» в реальном времени, разбив ваш jQuery на три элемента. «ON mouseover» «ON mousemove» и «ON mouseout» - потому что функция 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 - надеюсь, что это помогает

---

Что происходит здесь проблема с новый контент, сгенерированный АЯКС вызова, что новый контент не был создан экземпляр с функциями JQuery:

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

чтобы устранить эту проблему, которую вы хотите преобразовать, что JQuery .hover вызвать к eith er функций .on() или .live() [в зависимости от вашей версии jQuery .live - это устаревшая устаревшая функция, похожая на .on(). если Вы используете любую последнюю версию JQuery, вы должны попробовать .он() первым]

Нечто подобное будет решить эту проблему:

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

То, что это переводится примерно:

в пределах тело страницы - в событии наведения всех элементов «.tip_trigger» [независимо от того, когда они сгенерированы с помощью ajax или на готовом документе] - вызов указанной функции ...

Важно отметить, что использование «тела» - это плохая практика, вы захотите замените селектор «body» на самый конкретный элемент, который существует в вашем документе во время вызова этого jQuery, а также содержит объекты «.tip_trigger», которые вы создаете с помощью ajax. тем более конкретным вы можете быть здесь, повысит производительность.