[jQuery] class変更されたときにevent発火

対象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

2 Replies to “[jQuery] class変更されたときにevent発火”

  1. 参考にさせていただいます。特定の要素のclassのみが変更された時に発火させるにはどうしたらよいですか?

  2. コメントありがとうございます!
    厳密には「特定のclassのみで発火」にはなりませんが、特定のclassのときだけ処理をするという目的でいいのなら、処理本体の中でjQueryのhasClassで特定のclassを持っているかどうか判断して処理するのはどうですか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です