対象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
参考にさせていただいます。特定の要素のclassのみが変更された時に発火させるにはどうしたらよいですか?
コメントありがとうございます!
厳密には「特定のclassのみで発火」にはなりませんが、特定のclassのときだけ処理をするという目的でいいのなら、処理本体の中でjQueryのhasClassで特定のclassを持っているかどうか判断して処理するのはどうですか?