[解決済み] 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
を参照してください。レガシーブラウザをサポートする必要がある場合は、最初の例で説明した方法を使用する必要があります。
関連
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQueryでCSSのクラス変更時にイベントを発生させる。
-
[解決済み] JSのDateからDay名
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] $.ajax実行中にローディングイメージを表示する