Problem mit qTip - Tipps nicht angezeigt, weil Elemente nach dem Skript laden

Question

Ich bin nicht sehr erfahren mit Javascript, jQuery oder es ist Plugins, aber in der Regel verwalte ich. Wie auch immer, mein Kunde baut eine Website und einer seiner Zwecke ist es, Nachrichtenartikel von verschiedenen Seiten zu sammeln und die Titel in ungeordneten HTML-Listen anzuzeigen. Ich habe keinen Zugriff auf seinen Code, die Nachrichten Artikel laden ziemlich langsam (viel, nachdem die Website geladen hat).

Ich verwende qTIP und die Idee ist, dass sobald Sie den Mauszeiger über einen Nachrichtentitel bewegen, wird ein Tooltip generiert. Das funktioniert in meiner Entwicklungsumgebung gut, weil ich Dummy-Titel habe, die von nirgendwo erzeugt werden.

Das Problem ist, dass, sobald der Client die Site in seiner Testumgebung einstellt, die Skripte, die die Nachrichtentitel in die Listen laden, so langsam sind, dass das qTIP-Skript geladen wird, bevor irgendwelche Elemente in den Listen sind. Daher sind keine <li>'s bekannt, die Tooltips aufnehmen und generieren.

Gibt es eine Möglichkeit sicherzustellen, dass ALLE Nachrichtenartikel geladen werden, bevor das Tooltip-Skript geladen wird? Ich denke, dass eine einfache Verzögerung beim Laden des Skripts nicht sehr schlau ist, da einige der Titel länger zu laden scheinen als andere, so dass die Verzögerung ziemlich lang sein müsste.

Answer 1

Sie sollten die Live-Ereignisse des jQuery-Framework verwenden.

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

so zum Beispiel könnten Sie etwas tun, wie

$("li").live('mouseover', function(){ 
            $(this).qTip(...); 
            }); 

ref: http://docs.jquery.com/Events/live

Answer 2

Meine Aktualisierung am unteren

Ich habe an diesem Problem arbeiten als Nun, und eine ähnliche Lösung wie @Gaby gefunden. Das Problem mit der @ Gaby-Lösung ist, dass sie den qTip erst erzeugt, wenn das mouseover-Ereignis eingetreten ist. Dies bedeutet, dass Sie den qTip nicht beim ersten Mal sehen, sondern beim zweiten Mal. Außerdem wird es den qTip bei jedem Mouseover neu erstellen, was nicht gerade optimal ist.

Die Lösung, die ich mit ging, ist dies:

$("li").live('mouseover', function() { 
    var target = $(this); 
    if (target.data('qtip')) { return false; } 
    target.qtip(...); 
    target.trigger('mouseover'); 
}); 

Hier ist, was es tut:

• Sets zum li Element Ziel
• Gibt zurück, wenn das Element li hat bereits eine qtip
• Wenn kein qtip auf li, dann gilt qtip
• Sendet Mouseover-Trigger erneut, so dass qtip ist acti vated

Ich weiß, das ist ein bisschen hacky, aber es scheint zu funktionieren. Beachten Sie auch, dass die 2.0 version of qTip should support live() als eine Option. Soweit ich das beurteilen kann, unterstützt die current 2.0 development branch es noch nicht.

UPDATE:

Hier ist der richtige Weg, dies zu tun, direkt vom qtip Entwickler selbst in den Foren:

$('selector').live('mouseover', function() { 
    $(this).qtip({ 
     overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed 
     content: 'I\'m a live qTip', // comma was missing here 
     show: { 
     ready: true // Needed to make it show on first mouseover event 
     } 
    }); 
}) 

es also zuerst stellt sicher, dass Sie keine neue qtips neu erstellen Sie jeden Mouseover mit "overwrite: false". Dann macht es die Qtip-Show beim ersten Mouseover mit "show: {ready: true}".

Answer 3

Ja, ich habe etwas ähnliches gefunden. Ich denke, jemand hat einen ähnlichen Artikel in seinen Foren gepostet. Ich habe das mouseover -Ereignis in mouseMove geändert, so dass der qtip beim ersten mouseover aktiviert wird.

$('li').live('mousemove', function() { 
    if(!$(this).data('qtip')) { 
    $(this).qtip(...) 

Ich stimme auch zu, dass dies eine sehr hacky Lösung ist, aber ich könnte nicht mit einem besseren kommen. Vielleicht wäre es besser, den qtip in der Callback-Funktion zu überprüfen und anzuwenden, die die li füllt, aber ich habe nicht wirklich Zugriff auf diesen Code.

Answer 4

Nicht umsonst, aber ich habe nur die show:{ready:true} in meinem onmouseover Ereignis hinzugefügt. Das funktioniert in Chrome & FF.