jQuery toggleClassコールバックの使い方は？

Question

私はtoggleClassと、このシンプルなjQueryのイベントがあります

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

私はfa-stop-circleが追加された場合、いくつかのメソッドを呼び出すしたいと思います。このイベントをどのように監視できますか？

Answer 1

toggleClass()要素は次のように、すぐにtoggleClass()を呼び出した後、クラスを持っている場合しかし、あなたは確認することができ、コールバックを持っていない：

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

Working example

Answer 2

あなたが

あなたが作成し、毎回toggleClass()が実行され、このイベントに耳を傾けますカスタムイベントを発生機能を使用することができますトグル

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

UPDATE後if文を追加することができますあなたのメソッドを実行する。

/** 
 
* 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

コンビナトで.done()を使用する必要がありますイオン。.promise()。

約束は繰延オブジェクトを返します。

doneは、遅延オブジェクトが解決されたときにハンドラを追加します。

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

Answer 4

以下のコードが有効です。 promise()メソッドを使用し、bindそれを.done()にすることができます。

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