Come triggersre un evento sul cambio di class usando jQuery?

Mi piacerebbe avere qualcosa come:

$('#myDiv').bind('class "submission ok" added'){ alert('class "submission ok" has been added'); }); 

Non si verifica alcun evento quando una class cambia. L’alternativa è di aumentare manualmente un evento quando si modifica la class in modo programmato:

 $someElement.on('event', function() { $('#myDiv').addClass('submission-ok').trigger('classChange'); }); // in another js file, far, far away $('#myDiv').on('classChange', function() { // do stuff }); 

AGGIORNARE

Questa domanda sembra raccogliere alcuni visitatori, quindi ecco un aggiornamento con un approccio che può essere utilizzato senza dover modificare il codice esistente utilizzando il nuovo MutationObserver :

 var $div = $("#foo"); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === "class") { var attributeValue = $(mutation.target).prop(mutation.attributeName); console.log("Class attribute changed to:", attributeValue); } }); }); observer.observe($div[0], { attributes: true }); $div.addClass('red'); 
 .red { color: #C00; } 
  
#foo.bar

È ansible sostituire le funzioni jQuery addClass e removeClass originali con le proprie che richiamano le funzioni originali e quindi triggersno un evento personalizzato. (Utilizzo di una funzione anonima autoinvitante per contenere il riferimento alla funzione originale)

 (function( func ) { $.fn.addClass = function() { // replace the existing function on $.fn func.apply( this, arguments ); // invoke the original function this.trigger('classChanged'); // trigger the custom event return this; // retain jQuery chainability } })($.fn.addClass); // pass the original function as an argument (function( func ) { $.fn.removeClass = function() { func.apply( this, arguments ); this.trigger('classChanged'); return this; } })($.fn.removeClass); 

Quindi il resto del codice sarebbe semplice come ti aspetteresti.

 $(selector).on('classChanged', function(){ /*...*/ }); 

Aggiornare:

Questo approccio fa presupporre che le classi verranno modificate solo tramite i metodi jQuery addClass e removeClass. Se le classi vengono modificate in altri modi (come la manipolazione diretta dell’attributo di class attraverso l’elemento DOM), l’uso di qualcosa come MutationObserver s come spiegato nella risposta accettata qui sarebbe necessario.

Anche come un paio di miglioramenti a questi metodi:

  • Attiva un evento per ogni class aggiunta ( classAdded ) o rimossa ( classRemoved ) con la class specifica passata come argomento alla funzione di callback e triggersta solo se la particolare class è stata effettivamente aggiunta (non presente in precedenza) o rimossa (era presente in precedenza)
  • classChanged solo classChanged se qualche class è effettivamente cambiata

     (function( func ) { $.fn.addClass = function(n) { // replace the existing function on $.fn this.each(function(i) { // for each element in the collection var $this = $(this); // 'this' is DOM element in this context var prevClasses = this.getAttribute('class'); // note its original classs var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString(); // retain function-type argument support $.each(classNames.split(/\s+/), function(index, className) { // allow for multiple classs being added if( !$this.hasClass(className) ) { // only when the class is not already present func.call( $this, className ); // invoke the original function to add the class $this.trigger('classAdded', className); // trigger a classAdded event } }); prevClasses != this.getAttribute('class') && $this.trigger('classChanged'); // trigger the classChanged event }); return this; // retain jQuery chainability } })($.fn.addClass); // pass the original function as an argument (function( func ) { $.fn.removeClass = function(n) { this.each(function(i) { var $this = $(this); var prevClasses = this.getAttribute('class'); var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString(); $.each(classNames.split(/\s+/), function(index, className) { if( $this.hasClass(className) ) { func.call( $this, className ); $this.trigger('classRemoved', className); } }); prevClasses != this.getAttribute('class') && $this.trigger('classChanged'); }); return this; } })($.fn.removeClass); 

Con queste funzioni di sostituzione è quindi ansible gestire qualsiasi class modificata tramite ClassChanged o classi specifiche da aggiungere o rimuovere controllando l’argomento alla funzione di callback:

 $(document).on('classAdded', '#myElement', function(event, className) { if(className == "something") { /* do something */ } }); 

Usa il trigger per sparare il tuo evento. Ogni volta che cambi la class aggiungi trigger con nome

JS Fiddle DEMO

 $("#main").on('click', function () { $("#chld").addClass("bgcolorRed").trigger("cssFontSet"); }); $('#chld').on('cssFontSet', function () { alert("Red bg set "); }); 

Scopri jQuery: blog tutorial semplice e facile da jQuery

puoi usare qualcosa come questo:

 $(this).addClass('someClass'); $(Selector).trigger('ClassChanged') $(otherSelector).bind('ClassChanged', data, function(){//stuff }); 

ma in caso contrario, no, non esiste una funzione predefinita per triggersre un evento quando una class cambia.

Leggi di più sui trigger qui