1. ホーム
  2. jquery

[解決済み】jQueryでCSSのクラス変更時にイベントを発生させる。

2022-04-02 11:18:52

質問

jQueryでCSSクラスが追加・変更されたときにイベントを発生させるには? CSSクラスが変更されると、jQueryのイベントが発生しますか? change() イベントを発生させることができますか?

解決方法は?

スクリプト内でクラスを変更するたびに trigger を使用して、独自のイベントを発生させることができます。

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

しかし、そうでなければ、クラスが変更されたときにイベントを発生させるためのベイクイン方法はありません。 change() は、入力が変更された入力からフォーカスが外れた後にのみ発生します。

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});
.box { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

jQueryトリガーに関する詳細情報