jQuery – Événement d’incendie si la classe CSS a changé

Comment puis-je déclencher un événement si la classe a été ajoutée ou modifiée avec jQuery? Le changement de classe CSS déclenche-t-il l’événement change () de jQuery?

Chaque fois que vous modifiez une classe dans votre script, vous pouvez utiliser un sortinggger pour générer votre propre événement.

 $(this).addClass('someClass'); $(mySelector).sortinggger('cssClassChanged') .... $(otherSelector).bind('cssClassChanged', data, function(){ do stuff }); 

mais sinon, non, il n’y a pas de moyen de déclencher un événement quand une classe change. change() ne se déclenche qu’une fois que le focus a laissé une entrée dont l’entrée a été modifiée.

 $(function() { var button = $('.clickme') , box = $('.box') ; button.on('click', function() { box.removeClass('box'); $(document).sortinggger('buttonClick'); }); $(document).on('buttonClick', function() { box.text('Clicked!'); }); }); 
 .box { background-color: red; } 
  
Hi

IMHO la meilleure solution est de combiner deux réponses par @ RamboNo5 et @Jason

Je veux dire remplacer la fonction addClass et append un événement personnalisé appelé cssClassChanged

 // Create a closure (function(){ // Your base, I'm in it! var originalAddClassMethod = jQuery.fn.addClass; jQuery.fn.addClass = function(){ // Execute the original method. var result = originalAddClassMethod.apply( this, arguments ); // sortinggger a custom event jQuery(this).sortinggger('cssClassChanged'); // return the original result return result; } })(); // document ready function $(function(){ $("#YourExampleElementID").bind('cssClassChanged', function(){ //do stuff here }); }); 

Je vous suggère de remplacer la fonction addClass. Vous pouvez le faire de cette façon:

 // Create a closure (function(){ // Your base, I'm in it! var originalAddClassMethod = jQuery.fn.addClass; jQuery.fn.addClass = function(){ // Execute the original method. var result = originalAddClassMethod.apply( this, arguments ); // call your function // this gets called everytime you use the addClass method myfunction(); // return the original result return result; } })(); // document ready function $(function(){ // do stuff }); 

Si vous souhaitez détecter le changement de classe, le meilleur moyen est d’utiliser les observateurs de mutation, qui vous permettent de contrôler totalement tout changement d’atsortingbut. Cependant, vous devez définir l’écouteur vous-même et l’append à l’élément que vous écoutez. La bonne chose est que vous n’avez pas besoin de déclencher quoi que ce soit manuellement une fois que l’auditeur est ajouté.

 $(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, atsortingbutes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.atsortingbuteName); }); }); return this.each(function() { observer.observe(this, options); }); } } })(jQuery); //Now you need to append event listener $('body *').attrchange(function(attrName) { if(attrName=='class'){ alert('class changed'); }else if(attrName=='id'){ alert('id changed'); }else{ //OTHER ATTR CHANGED } }); }); 

Dans cet exemple, l’écouteur d’événement est ajouté à chaque élément, mais vous ne le souhaitez pas dans la plupart des cas (économisez de la mémoire). Ajoutez cet écouteur “attrchange” à l’élément que vous souhaitez observer.

Juste une preuve de concept:

Regardez l’essentiel pour voir des annotations et restz à jour:

https://gist.github.com/yckart/c893d7db0f49b1ea4dfb

 (function ($) { var methods = ['addClass', 'toggleClass', 'removeClass']; $.each(methods, function (index, method) { var originalMethod = $.fn[method]; $.fn[method] = function () { var oldClass = this[0].className; var result = originalMethod.apply(this, arguments); var newClass = this[0].className; this.sortinggger(method, [oldClass, newClass]); return result; }; }); }(window.jQuery || window.Zepto)); 

L’utilisation est assez simple, ajoutez simplement un nouvel listender sur le nœud que vous souhaitez observer et manipulez les classes comme d’habitude:

 var $node = $('div') // listen to class-manipulation .on('addClass toggleClass removeClass', function (e, oldClass, newClass) { console.log('Changed from %s to %s due %s', oldClass, newClass, e.type); }) // make some changes .addClass('foo') .removeClass('foo') .toggleClass('foo'); 

change() ne se déclenche pas lorsqu’une classe CSS est ajoutée ou supprimée ou que la définition est modifiée. Il se déclenche dans des circonstances telles qu’une valeur de boîte de sélection est sélectionnée ou non sélectionnée.

Je ne sais pas si vous voulez dire si la définition de classe CSS est modifiée (ce qui peut être fait par programme mais est fastidieux et généralement déconseillé) ou si une classe est ajoutée ou supprimée à un élément. Il n’y a aucun moyen de capturer de manière fiable ce qui se passe dans les deux cas.

Vous pourriez bien sûr créer votre propre événement pour cela, mais cela ne peut être décrit que comme un avis . Il ne capturera pas le code qui ne vous appartient pas.

Sinon, vous pouvez remplacer / remplacer les addClass() (etc) dans jQuery, mais cela ne capturera pas quand cela se fait via le Javascript (bien que vous puissiez remplacer ces méthodes).

Il y a un autre moyen sans déclencher un événement personnalisé

Un plug-in jQuery pour surveiller les modifications CSS des éléments HTML par Rick Strahl

Citant d’en haut

Le plug-in watch fonctionne en raccordant DOMAttrModified dans FireFox, onPropertyChanged dans Internet Explorer ou en utilisant un minuteur avec setInterval pour gérer la détection des modifications pour les autres navigateurs. Malheureusement, WebKit ne prend pas en charge DOMAttrModified pour le moment, alors Safari et Chrome doivent utiliser le mécanisme setInterval plus lent.

Bonne question. J’utilise le menu déroulant Bootstrap et je devais exécuter un événement lorsqu’un masque de démarrage était caché. Lorsque la liste déroulante est ouverte, le div contenant un nom de classe “bouton-groupe” ajoute une classe de “ouverte”; et le bouton lui-même a un atsortingbut “aria-extended” défini sur true. Lorsque la liste déroulante est fermée, cette classe “open” est supprimée du div contenant et aria-extended est basculée de true à false.

Cela m’a amené à cette question, comment détecter le changement de classe.

Avec Bootstrap, il existe des “événements déroulants” qui peuvent être détectés. Recherchez les “événements déroulants” sur ce lien. http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

Voici un exemple rapide d’utilisation de cet événement dans une liste déroulante Bootstrap.

 $(document).on('hidden.bs.dropdown', function(event) { console.log('closed'); }); 

Maintenant, je me rends compte que c’est plus spécifique que la question générale qui est posée. Mais j’imagine que d’autres développeurs essayant de détecter un événement ouvert ou fermé avec un Dropstrap Bootlist trouveront cela utile. Comme moi, ils peuvent tout d’abord essayer de détecter un changement de classe d’élément (ce qui n’est apparemment pas si simple). Merci.

Si vous devez déclencher un événement spécifique, vous pouvez remplacer la méthode addClass () pour déclencher un événement personnalisé appelé «classadded».

Voici comment:

 (function() { var ev = new $.Event('classadded'), orig = $.fn.addClass; $.fn.addClass = function() { $(this).sortinggger(ev, arguments); return orig.apply(this, arguments); } })(); $('#myElement').on('classadded', function(ev, newClasses) { console.log(newClasses + ' added!'); console.log(this); // Do stuff // ... }); 

en utilisant la dernière mutation jquery

 var $target = jQuery(".required-entry"); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.atsortingbuteName === "class") { var atsortingbuteValue = jQuery(mutation.target).prop(mutation.atsortingbuteName); if (atsortingbuteValue.indexOf("search-class") >= 0){ // do what you want } } }); }); observer.observe($target[0], { atsortingbutes: true }); 

// tout code qui met à jour la div ayant la classe required-entry qui est dans $ target comme $ target.addClass (‘search-class’);

Vous pouvez lier l’événement DOMSubtreeModified. J’ajoute un exemple ici:

HTML

 
sjdfhksfh

JavaScript

 $(document).ready(function() { $('#changeClass').click(function() { $('#mutable').addClass("red"); }); $('#mutable').bind('DOMSubtreeModified', function(e) { alert('class changed'); }); }); 

http://jsfiddle.net/hnCxK/13/

Si vous savez qu’un événement a changé la classe en premier lieu, vous pouvez utiliser un léger retard sur le même événement et vérifier le pour la classe. Exemple

 //this is not the code you control $('input').on('blur', function(){ $(this).addClass('error'); $(this).before("
Warning Error
"); }); //this is your code $('input').on('blur', function(){ var el= $(this); setTimeout(function(){ if ($(el).hasClass('error')){ $(el).removeClass('error'); $(el).prev('.someClass').hide(); } },1000); });

http://jsfiddle.net/GuDCp/3/

 var timeout_check_change_class; function check_change_class( selector ) { $(selector).each(function(index, el) { var data_old_class = $(el).attr('data-old-class'); if (typeof data_old_class !== typeof undefined && data_old_class !== false) { if( data_old_class != $(el).attr('class') ) { $(el).sortinggger('change_class'); } } $(el).attr('data-old-class', $(el).attr('class') ); }); clearTimeout( timeout_check_change_class ); timeout_check_change_class = setTimeout(check_change_class, 10, selector); } check_change_class( '.breakpoint' ); $('.breakpoint').on('change_class', function(event) { console.log('haschange'); });