Comment puis-je déclencher un événement dans jQuery lorsqu'une classe CSS change ?

Déclencher des événements lors de modifications de classe CSS dans jQuery

Défi :
JQuery peut-il être utilisé pour déclencher un événement lorsqu'une classe CSS est ajouté ou modifié ? La modification d'une classe CSS appelle-t-elle automatiquement l'événement jQuery change() ?

Résolution :
jQuery n'offre pas intrinsèquement d'événement lorsqu'une classe CSS change. Cependant, vous pouvez déclencher votre propre événement à l'aide d'un déclencheur lors de la modification d'une classe dans votre script :

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged');

Ensuite, liez votre événement personnalisé à un sélecteur pour spécifier les actions à entreprendre lorsque la classe change :

$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

L'événement change() dans jQuery est dédié aux éléments d'entrée et se déclenche uniquement lorsque le focus laisse une entrée avec un contenu modifié après les données entrée.

Code de démonstration :

$(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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!