[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;
}
})();
// 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; } })();
// 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(){
// やりたい処理内容
});
$('#hoge').bind('cssClassAdd', function(){ // やりたい処理内容 });
$('#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を持っているかどうか判断して処理するのはどうですか?

コメントを残す

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