qTipp-Tooltip wird nicht angezeigt, jQuery

Question

Ich habe eine Website, die Elemente, 12 Elemente pro Seite anzeigt, und ich kann durch die Seiten mithilfe von jquery paginieren. Auf der gleichen Seite habe ich die Tooltip-Funktion mit qTip implementiert.

Beim Schweben über den Elementen erscheinen einige Informationen. Das funktioniert, bis ich mit dem Paginator auf die nächste Seite gehe.

Die Seitennummerierung lädt den Inhalt neu. Aber es hat die gleiche Struktur wie beim Aktualisieren der Seite.

Hier ist mein 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' 
    } 

    }); 
    }); 

}); 

Die html/dom ändert sich nicht:

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

QTIP aus jeder nimmt die rel Wert Ende lädt den Inhalt a.ppname.

Answer 1

Dies passiert, weil neue Elemente nicht automatisch "qTiped" werden, wenn sie nach dem Laden der Seite geladen werden. Für normale Ereignisse müssten Sie .live() anstelle von .bind() verwenden.

Dies wurde zuvor gelöst (aus dem Kommentar zu urteilen): Problem with qTip - Tips not showing because elements load after the script.

Der richtige Weg, es zu tun (von dieser Antwort):

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