1. ホーム
  2. javascript

[解決済み] jQueryでクラス変更時にイベントを発生させるには?

2023-01-16 14:36:54

質問

のようなものが欲しいです。

$('#myDiv').bind('class "submission ok" added'){
    alert('class "submission ok" has been added');
});

どのように解決するのですか?

クラスが変更されたときに発生するイベントはありません。代わりに、プログラム的にクラスを変更したときに手動でイベントを発生させることができます。

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});


アップデイト

この質問は訪問者を集めているようなので、ここでは、新しい MutationObserver :

var $div = $("#foo");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var attributeValue = $(mutation.target).prop(mutation.attributeName);
    console.log("Class attribute changed to:", attributeValue);
  });
});

observer.observe($div[0], {
  attributes: true,
  attributeFilter: ['class']
});

$div.addClass('red');
.red {
  color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" class="bar">#foo.bar</div>

注意点としては MutationObserver は新しいブラウザ、特にChrome 26、FF 14、IE 11、Opera 15、Safari 6でのみ利用可能であることに注意してください。参照 MDN を参照してください。レガシーブラウザをサポートする必要がある場合は、最初の例で説明した方法を使用する必要があります。