Wie kann ich ein Ereignis auslösen, wenn eine CSS-Klasse mit jQuery hinzugefügt oder geändert wird? Löst das Ändern einer CSS-Klasse das jQuery- change()
Ereignis aus?
jquery
css
jquery-events
user237060
quelle
quelle
Antworten:
Wann immer Sie eine Klasse in Ihrem Skript ändern, können Sie mit a
trigger
Ihr eigenes Ereignis auslösen.Aber ansonsten gibt es keine Möglichkeit, ein Ereignis auszulösen, wenn sich eine Klasse ändert.
change()
Wird erst ausgelöst, nachdem der Fokus eine Eingabe hinterlassen hat, deren Eingabe geändert wurde.Weitere Informationen zu jQuery-Triggern
quelle
changeColor
Ereignis auslösen , und alle Objekte, die dieses Ereignis abonnieren, können entsprechend reagieren.IMHO ist die bessere Lösung, zwei Antworten von @ RamboNo5 und @Jason zu kombinieren
Ich meine, die addClass-Funktion zu überschreiben und ein benutzerdefiniertes Ereignis namens aufzurufen
cssClassChanged
quelle
$()
der eigentlichen Aktion sind es Hunderte von Ereignissen .cssClassChanged
Ereignis an ein Element binden , müssen Sie sich darüber im Klaren sein, dass es ausgelöst wird, selbst wenn sein Kind seine Klasse wechselt. Wenn Sie dieses Ereignis beispielsweise nicht für sie auslösen möchten, fügen Sie einfach etwas wie$("#YourExampleElementID *").on('cssClassChanged', function(e) { e.stopPropagation(); });
nach dem Binden hinzu. Wie auch immer, wirklich schöne Lösung, danke!Wenn Sie Klassenänderungen erkennen möchten, verwenden Sie am besten Mutationsbeobachter, mit denen Sie die vollständige Kontrolle über alle Attributänderungen erhalten. Sie müssen den Listener jedoch selbst definieren und an das Element anhängen, das Sie gerade hören. Gut ist, dass Sie nichts manuell auslösen müssen, sobald der Listener angehängt ist.
In diesem Beispiel wird der Ereignis-Listener an jedes Element angehängt, aber das möchten Sie in den meisten Fällen nicht (Speicherplatz sparen). Hängen Sie diesen "attrchange" -Listener an das Element an, das Sie beobachten möchten.
quelle
DOMMutationObserver
.Ich würde vorschlagen, dass Sie die Funktion addClass überschreiben. Sie können es so machen:
quelle
Nur ein Proof of Concept:
Schauen Sie sich das Wesentliche an, um einige Anmerkungen zu sehen und auf dem neuesten Stand zu bleiben:
https://gist.github.com/yckart/c893d7db0f49b1ea4dfb
Die Verwendung ist recht einfach. Fügen Sie einfach einen neuen Listener zu dem Knoten hinzu, den Sie beobachten möchten, und bearbeiten Sie die Klassen wie gewohnt:
quelle
this[0]
ist undefiniert ... ersetzen Sie einfach das Ende der Zeilen durchvar oldClass
undvar newClass
mit der folgenden Zuordnung:= (this[0] ? this[0].className : "");
unter Verwendung der neuesten jquery-Mutation
// jeder Code, der div mit dem erforderlichen Klasseneintrag aktualisiert, der sich in $ target befindet, wie $ target.addClass ('Suchklasse');
quelle
change()
wird nicht ausgelöst, wenn eine CSS-Klasse hinzugefügt oder entfernt wird oder sich die Definition ändert. Es wird unter Umständen ausgelöst, wenn ein Auswahlfeldwert ausgewählt oder nicht ausgewählt ist.Ich bin mir nicht sicher, ob Sie meinen, ob die CSS-Klassendefinition geändert wird (was programmgesteuert erfolgen kann, aber langwierig ist und nicht allgemein empfohlen wird) oder ob eine Klasse zu einem Element hinzugefügt oder daraus entfernt wird. In beiden Fällen gibt es keine Möglichkeit, dieses Ereignis zuverlässig zu erfassen.
Sie können natürlich Ihre eigene Veranstaltung dafür erstellen, dies kann jedoch nur als Beratung bezeichnet werden . Es wird kein Code erfasst, der nicht von Ihnen stammt.
Alternativ können Sie die
addClass()
(etc) -Methoden in jQuery überschreiben / ersetzen , dies wird jedoch nicht erfasst, wenn dies über Vanilla Javascript erfolgt (obwohl Sie diese Methoden vermutlich auch ersetzen könnten).quelle
Es gibt noch eine Möglichkeit, ohne ein benutzerdefiniertes Ereignis auszulösen
Ein jQuery-Plug-In zur Überwachung von CSS-Änderungen an HTML-Elementen von Rick Strahl
Zitat von oben
quelle
Gute Frage. Ich verwende das Bootstrap-Dropdown-Menü und musste ein Ereignis ausführen, wenn ein Bootstrap-Dropdown ausgeblendet wurde. Wenn das Dropdown-Menü geöffnet wird, fügt das enthaltende div mit dem Klassennamen "button-group" eine Klasse von "open" hinzu. und die Schaltfläche selbst hat ein "aria-erweitertes" Attribut, das auf "true" gesetzt ist. Wenn das Dropdown-Menü geschlossen ist, wird diese Klasse von "open" aus dem enthaltenen div entfernt und aria-expanded von true auf false umgeschaltet.
Das führte mich zu der Frage, wie man den Klassenwechsel erkennt.
Mit Bootstrap können "Dropdown-Ereignisse" erkannt werden. Suchen Sie unter diesem Link nach "Dropdown-Ereignissen". http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
Hier ist ein kurzes und schmutziges Beispiel für die Verwendung dieses Ereignisses in einem Bootstrap-Dropdown.
Jetzt ist mir klar, dass dies spezifischer ist als die allgemeine Frage, die gestellt wird. Ich kann mir jedoch vorstellen, dass andere Entwickler, die versuchen, ein offenes oder geschlossenes Ereignis mit einem Bootstrap-Dropdown zu erkennen, dies hilfreich finden. Wie ich gehen sie möglicherweise zunächst den Weg, einfach zu versuchen, eine Änderung der Elementklasse zu erkennen (was anscheinend nicht so einfach ist). Vielen Dank.
quelle
Wenn Sie ein bestimmtes Ereignis auslösen müssen, können Sie die Methode addClass () überschreiben, um ein benutzerdefiniertes Ereignis mit dem Namen 'classadded' auszulösen.
Hier wie:
quelle
Sie können das DOMSubtreeModified-Ereignis binden. Ich füge hier ein Beispiel hinzu:
HTML
JavaScript
http://jsfiddle.net/hnCxK/13/
quelle
Wenn Sie wissen, welches Ereignis die Klasse überhaupt geändert hat, können Sie eine geringfügige Verzögerung für dasselbe Ereignis verwenden und die für die Klasse überprüfen. Beispiel
http://jsfiddle.net/GuDCp/3/
quelle
quelle