jQuery toggleClass Rückruf wie?

Question

Ich habe dieses einfache jQuery Ereignis mit toggleClass:

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

Ich mag würde eine Methode nennen, wenn fa-stop-circle hinzugefügt wird. Wie kann ich dieses Ereignis überwachen?

Answer 1

toggleClass() keinen Rückruf, jedoch können Sie überprüfen, ob das Element die Klasse hat unmittelbar nach toggleClass() Aufruf wie folgt aus:

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

Working example

Answer 2

Sie können eine if Anweisung nach dem Hin- und Herschalten

$(this).on("click", function() { 
    var that = $(this); 
    that.toggleClass("fa-stop-circle"); 
    if (that.hasClass('fa-stop-circle')) { 
    // Execute your method 
    } 
}); 

UPDATE hinzufügen

Sie könnten eine Funktion erstellen und verwenden, das ein benutzerdefiniertes Ereignis ausgelöst toggleClass() jedes Mal ausgeführt wird und hört auf dieses Ereignis in um Ihre Methode auszuführen.

/** 
 
* Custom class for toggling classes 
 
* @param $elem {jQuery object} 
 
* @param classes {array} 
 
*/ 
 
var customToggleClass = function($elem, classes) { 
 
    if ($elem && $elem instanceof jQuery) { 
 
    if (classes && classes.length > 0) {  
 
     if (classes.length == 1) { 
 
     $elem.toggleClass(classes[0]); 
 
     $(document).trigger('custom_toggleClass'); 
 
     } else if (classes.length == 2) { 
 
     $elem.toggleClass(classes[0], classes[1]); 
 
     $(document).trigger('custom_toggleClass'); 
 
     }  
 
    } 
 
    } 
 
} 
 

 
$(document).on('click', '#test', function() { 
 
    customToggleClass($('#test'), ['test_class_1', 'test_class_2']); 
 
}); 
 

 
$(document).on('custom_toggleClass', function() { 
 
    alert('Class changed!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<span id="test">Click me</span>

Answer 3

Sie sollten .done() in Kombination verwenden Ion mit .promise().

Die Zusage wird verzögerte Objekt zurückgeben;

Dann erledigt fügt Handler hinzu, wenn das verzögerte Objekt aufgelöst wird.

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

Answer 4

Der folgende Code sollte funktionieren. Sie können die promise() Methode und bind es zu .done() verwenden.

$(this).on("click", function() { 
    $(this).toggleClass("fa-stop-circle").promise().done(function(){ 
     //call your method here 
    }); 
});