jQuery toggleClass callback how to?

Question

I have this simple jQuery event with toggleClass:

$(this).on("click", function() {
    $(this).toggleClass("fa-stop-circle");
});

I would like to call some method if fa-stop-circle is added. How can I monitor this event?

Answer 1

toggleClass() doesn't have a callback, however you can check if the element has the class immediately after calling toggleClass(), like this:

$(this).on("click", function() {
    var $el = $(this).toggleClass("fa-stop-circle");
    if ($el.hasClass('fa-stop-circle')) {
        // do something...
    }
});

Working example

Answer 2

You should use .done() in combination with .promise().

The promise will return deferred object;

Then done adds handler when deferred object is resolved.

$(this).toggleClass("fa-stop-circle").promise().done(function() {
    if ($this).hasClass("fa-stop-circle")) {
        // your code
    }
});