How Can I Trigger an Event in jQuery When a CSS Class Changes?

Eliciting Events upon CSS Class Alterations in jQuery

Challenge:
Can jQuery be used to trigger an event when a CSS class is added or modified? Does altering a CSS class automatically invoke the jQuery change() event?

Resolution:
jQuery does not inherently offer an event for when a CSS class changes. However, you can trigger your own event using a trigger when altering a class in your script:

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

Then, bind your custom event to a selector to specify the actions to be taken when the class changes:

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

The change() event in jQuery is dedicated to input elements and triggers only when focus leaves an input with altered content after data entry.

Demonstration Code:

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

The above is the detailed content of How Can I Trigger an Event in jQuery When a CSS Class Changes?. For more information, please follow other related articles on the PHP Chinese website!