Déclenchement d'événements sur les changements de classe CSS en jQuery

Question

Comment puis-je déclencher un événement si une classe CSS est ajoutée ou modifiée à l'aide de jQuery ? La modification d'une classe CSS déclenche-t-elle l'événement jQuery ? change() événement ?

Answer 1

Chaque fois que vous changez une classe dans votre script, vous pourriez utiliser un trigger pour créer votre propre événement.

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

mais sinon, non, il n'y a pas de moyen intégré de déclencher un événement lorsqu'une classe change. change() se déclenche uniquement lorsque le focus quitte 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).trigger('buttonClick');
  });

  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

Plus d'informations sur les déclencheurs jQuery

Answer 2

À mon avis, la meilleure solution consiste à combiner les deux réponses de @RamboNo5 et @Jason.

Je veux dire remplacer la fonction addClass et ajouter 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 );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    $("#YourExampleElementID").bind('cssClassChanged', function(){ 
        //do stuff here
    });
});

Answer 3

Si vous voulez détecter un changement de classe, le meilleur moyen est d'utiliser des observateurs de mutation, qui vous donnent un contrôle total sur tout changement d'attribut. Cependant, vous devez définir vous-même l'écouteur et l'ajouter à l'élément que vous écoutez. L'avantage est que vous n'avez pas besoin de déclencher quoi que ce soit manuellement une fois que l'écouteur est ajouté.

$(function() {
(function($) {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    $.fn.attrchange = function(callback) {
        if (MutationObserver) {
            var options = {
                subtree: false,
                attributes: true
            };

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(e) {
                    callback.call(e.target, e.attributeName);
                });
            });

            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énements est ajouté à chaque élément, mais ce n'est pas ce que vous voulez dans la plupart des cas (pour économiser de la mémoire). Ajoutez cet écouteur "attrchange" à l'élément que vous voulez observer.

Answer 4

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

Answer 5

Juste une preuve de concept :

Regardez le gist pour voir des annotations et rester à 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.trigger(method, [oldClass, newClass]);

      return result;
    };
  });
}(window.jQuery || window.Zepto));

L'utilisation est assez simple, il suffit d'ajouter un nouveau listender sur le nœud que vous voulez observer et de manipuler 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');