L'info-bulle ne s'affiche pas, jQuery

Question

J'ai un site qui affiche des éléments, 12 éléments par page et je peux paginer à travers les pages en utilisant jquery. Sur la même page, j'ai implémenté la fonctionnalité info-bulle avec qTip.

En survolant les éléments, des informations apparaissent. Cela fonctionne jusqu'à ce que j'utilise le paginateur pour aller à la page suivante.

La pagination recharge le contenu. Mais il a la même structure que lorsque je rafraîchis la page.

Voici mon code:

$(document).ready(function() { 
$(".cornerize").corner("5px"); 
$('a#verd').live('click', exSite); 
$("a.tp").live('click', thumpsUp); 
$("a#next").click(getProgramms); 
$("a#previous").click(getProgramms); 
$("a#page").each(function() { 
    $(this).click(getProgramms); 
}); 

$('a.ppname[rel]').each(function(){ 

    $(this).qtip({ 
    content : {url :$(this).attr('rel')}, 
    position : { 
     corner : { 
     tooltip : 'leftBottom', 
     target : 'rightBottom' 
     } 
    }, 
    style : { 
     border : { 
     width : 5, 
     radius : 10 
     }, 
     padding : 10, 
     textAlign : 'center', 
     tip : true, 
     name : 'cream' 
    } 

    }); 
    }); 

}); 

Le html/dom ne change pas:

<a class="ppname" rel="link" href="#">...</a> 

Qtip prend de chaque a.ppname la fin de la valeur rel charge le contenu.

Answer 1

Cela se produit car les nouveaux éléments ne sont pas automatiquement "qTipé" lorsqu'ils sont chargés après le chargement de la page. Pour les événements réguliers, vous devez utiliser .live() au lieu de .

Ceci a été résolu avant (à en juger par le commentaire): Problem with qTip - Tips not showing because elements load after the script.

La bonne façon de le faire est (de cette réponse):

$('a.ppname[rel]').live('mouseover', function() { 
    var target = $(this); 
    if (target.data('qtip')) { return false; } 

    target.qtip({ 
     overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed 
     show: { 
      ready: true // Needed to make it show on first mouseover event 
     }, 
     content : {url :$(this).attr('rel')}, 
     position : { 
      corner : { 
       tooltip : 'leftBottom', 
       target : 'rightBottom' 
      } 
     }, 
     style : { 
      border : { 
      width : 5, 
      radius : 10 
     }, 
     padding : 10, 
     textAlign : 'center', 
     tip : true, 
     name : 'cream' 
    }); 

    target.trigger('mouseover'); 
});