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

Question

Ich bin nicht sehr erfahren mit Javascript, jQuery oder seinen Plugins, aber normalerweise schaffe ich es. Wie auch immer, mein Kunde baut eine Website und einer ihrer Zwecke ist es, Nachrichtenartikel von verschiedenen Websites zu holen und zeigen die Titel in ungeordneten HTML-Listen. Ich habe keinen Zugang zu seinem Code, die News-Artikel laden ziemlich langsam (viel nachdem die Seite geladen wurde).

Ich verwende qTIP, und die Idee ist, dass ein Tooltip generiert wird, sobald man den Mauszeiger über einen Nachrichtentitel bewegt. Dies funktioniert gut in meiner Entwicklungsumgebung, denn ich habe Dummy-Titel, die nicht von irgendwo generiert werden.

Das Problem ist, dass die Skripte, die die Nachrichtentitel in die Listen laden, so langsam sind, dass das qTIP-Skript geladen wird, bevor Elemente in den Listen vorhanden sind, sobald der Kunde die Seite in seiner Testumgebung eingerichtet hat. Daher weiß es nichts von irgendwelchen <li> aufgreifen und daraus Tooltips generieren.

Gibt es eine Möglichkeit sicherzustellen, dass ALLE Nachrichten, die lädt? Ich denke, dass eine einfache Verzögerung beim Laden des Skripts nicht sehr klug ist, da einige der Titel anscheinend länger zum Laden brauchen als andere, so dass die Verzögerung ziemlich lang sein müsste.

Answer 1

Siehe mein Update am Ende der Seite

Ich habe mich auch mit diesem Problem beschäftigt und bin zu einer ähnlichen Lösung gekommen wie @Gaby. Das Problem bei @Gaby's Lösung ist, dass der qTip erst nach dem Mouseover-Ereignis erstellt wird. Das bedeutet, dass man den qTip beim ersten Mouseover nicht sieht, beim zweiten aber schon. Außerdem wird der qTip jedes Mal neu erstellt, wenn man mit der Maus darüber fährt, was nicht gerade optimal ist.

Die Lösung, die ich gewählt habe, ist folgende:

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

Und so funktioniert es:

• Setzt das Ziel auf das Element li
• Gibt zurück, ob das li-Element bereits ein qtip hat
• Wenn kein qtip auf li, dann qtip darauf anwenden
• Sendet den Mouseover-Trigger erneut, damit qtip aktiviert wird

Ich weiß, das ist ein bisschen umständlich, aber es scheint zu funktionieren. Beachten Sie auch, dass die 2.0 Version von qTip sollte live() unterstützen als Option. Soweit ich das beurteilen kann, ist die aktueller Entwicklungszweig 2.0 unterstützt es noch nicht.

UPDATE:

Hier ist die richtige Vorgehensweise, direkt vom qtip-Entwickler selbst im Forum:

$('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 stellt also zunächst sicher, dass man nicht bei jedem Mouseover mit "overwrite: false" neue qtips erstellt. Dann wird der qtip beim ersten Mouseover angezeigt mit "show: {ready: true}".

Answer 2

Sie sollten die Live-Veranstaltungen des jQuery-Frameworks.

Bindet einen Handler an ein Ereignis (wie Klick) für alle aktuellen - und zukünftigen - übereinstimmenden Elemente. Kann auch benutzerdefinierte Ereignisse binden.

Sie könnten also zum Beispiel so etwas tun wie

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

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

Answer 3

Nicht umsonst, aber ich habe gerade die show:{ready:true} in meinem onmouseover Veranstaltung. Jetzt funktioniert es in Chrome und FF.

Answer 4

Ja, ich habe mir etwas Ähnliches ausgedacht. Ich glaube, jemand hat etwas ähnliches in seinem Forum 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 hakelige Lösung ist, aber eine bessere ist mir nicht eingefallen. Vielleicht Überprüfung und Anwendung der qtip in der Callback-Funktion, die die li's füllt wäre besser, aber ich habe nicht wirklich Zugang zu diesem Code.