タグ: CSS

対象elementのclassが変更されたときになにか処理を行いたい案件がありました。
もともとのclassを変更する処理のところに追記できればいいんですが、事情でそこには手が出せないので、なんとか外側からclassの変更を察知したい。

ということで、厳密に言ったら”class変更”時ではないのですが、jQueryでaddClassされたときにカスタムeventが発生するようにして対応しました。

まずどこかにカスタムイベント発火処理を書いて

// addClass時にイベントを起こす
(function(){
	// 元のmethodを保存
	var originalAddClassMethod = jQuery.fn.addClass;
	
	jQuery.fn.addClass = function(){
		// 元のmethodを実行
		var result = originalAddClassMethod.apply(this, arguments);
		
		// カスタムイベントを発火
		jQuery(this).trigger('cssClassAdd');
		
		return result;
	}
})();

あとはeventを受け取って処理したい内容を書く

$('#hoge').bind('cssClassAdd', function(){
    // やりたい処理内容
});

参考
jQuery – Fire event if CSS class changed