Como triggersr um evento na mudança de class usando jQuery?

Eu gostaria de ter algo como:

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

Não há nenhum evento gerado quando uma class é alterada. A alternativa é criar manualmente um evento quando você programaticamente alterar a class:

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

ATUALIZAR

Esta questão parece estar reunindo alguns visitantes, então aqui está uma atualização com uma abordagem que pode ser usada sem ter que modificar o código existente usando o novo 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

Você poderia replace as funções jQuery addClass e removeClass originais com as suas próprias que chamariam as funções originais e triggersriam um evento personalizado. (Usando uma function anônima auto-invocadora para conter a referência da function original)

 (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); 

Então o resto do seu código seria tão simples quanto você esperaria.

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

Atualizar:

Essa abordagem faz a suposição de que as classs só serão alteradas por meio dos methods addClass e removeClass do jQuery. Se as classs forem modificadas de outras maneiras (como a manipulação direta do atributo de class através do elemento DOM), será necessário usar algo como MutationObserver s, conforme explicado na resposta aceita aqui.

Também como algumas melhorias para estes methods:

  • Acione um evento para cada class que está sendo adicionada ( classAdded ) ou removida ( classRemoved ) com a class específica passada como um argumento para a function de retorno de chamada e somente acionada se a class em particular foi adicionada (não presente anteriormente) ou removida (estava presente anteriormente)
  • Apenas acione classChanged se alguma class for realmente alterada

     (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); 

Com essas funções de substituição, você pode manipular qualquer class alterada por meio de classChanged ou classs específicas sendo adicionadas ou removidas, verificando o argumento para a function de retorno de chamada:

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

Use o trigger para triggersr seu próprio evento. Sempre que você mudar de class adicionar gatilho com nome

JS Fiddle DEMO

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

Aprenda jQuery: Blog de tutoriais simples e fácil jQuery

você pode usar algo assim:

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

mas por outro lado, não, não há function predefinida para triggersr um evento quando uma class é alterada.

Leia mais sobre gatilhos aqui