Ich verwende die Tooltips von Zurb Foundation ( Ссылка ). Ich möchte ihr Verhalten leicht anpassen. Sie verwenden einen mouseover -Ereignis-Listener für das Quellelement, um den Tooltip (beim ersten Aufruf) zu erstellen und ihn dann einzublenden. Ich versuche, jQuery eine Teilmenge der QuickInfo-Quellen auf der Seite, entfernen Sie nur ihre Mouseover-Listener und binden Sie neue, die den Tooltip für eine Sekunde dort bleiben lassen, bevor sie verschwinden, nachdem die Maus wegbewegt wurde.
Hier ist der schwierige Teil. Zurb bindet seinen Hörer als solchen:
$('body.off-canvas').on('mouseenter', '.has-tooltip', ...);
Folgendes wird diesen Listener wie erwartet erfolgreich entfernen:
$('body.off-canvas').off('mouseenter', '.has-tooltip');
Aber ich möchte nur den Listener für einige dieser Elemente entfernen, so:
$('body.off-canvas').off('mouseenter', '.has-tooltip.my-custom-class');
Es stellt sich heraus, dass jQuery dies nicht als "subtraktiv" der größeren Menge von .has-tooltip -Elementen erkennt, sondern im Wesentlichen sagt: "Es gibt keinen Ereignis-Listener, der genau diesem Selektor entspricht, daher werde ich nichts tun." Hat jemand einen guten Workaround? Ich habe einige gefunden, die funktionieren, wenn Sie den ursprünglichen Listener selbst erstellen, aber das ist hier nicht der Fall.
Ich habe das gelöst, indem ich einen anderen Ansatz gewählt habe. Ich hatte gedacht, dass ich die standardmäßigen Foundation-Ereignisse nicht für alle normalen Tooltips entfernen konnte, da Foundation noch immer die Tooltip-Elemente erstellen musste. Die Problemumgehung war schwierig, aber es hat den Job erledigt.
Ich habe das mouseenter -Ereignis auf alle der QuickInfos manuell ausgelöst, sobald die Seite geladen wurde. Mit einer speziellen CSS-Klasse erzwingen sie, dass sie nach der Initialisierung unsichtbar bleiben, anstatt eingeblendet zu werden musste die Mausdaten im Event simulieren, da Foundation davon abhängt, die Tooltips anfänglich zu positionieren. Sobald die DOM-Änderungen vorgenommen wurden, konnte ich den normalen Tooltips Listener hinzufügen, die das Standardverhalten nachahmen, während ich benutzerdefinierte Listener zu meinen benutzerdefinierten Elementen hinzufüge.
Als Nebenbemerkung musste ich auch das Ganze in ein setTimeout(..., 200); einbinden, um sicherzustellen, dass es nach dem Anwenden der Foundation-Listener ausgeführt wird.
Alles in allem ist dies einer der komplizierteren Code, den ich jemals geschrieben habe, aber es funktioniert wie ein Zauber.
Tags und Links javascript html jquery dom javascript-events