jquery イベントを発火させたい（on(), trigger()）

規定のイベントやカスタムイベント（独自定義したイベント）を作成・発火させたい

作成日:2022-11-10, 更新日:2022-11-10

基本

イベントの設定

$(xxx).on(イベント, function(){});

▼対象要素が表示されるタイミングを考慮する必要がある場合

$(xxx).on(イベント, xxx, function(){});

※面倒だったら「$('body')」とかにしても良いかもしれない

イベントの発火

$(xxx).trigger(イベント);

▼クリックイベントのような既定のイベントの場合、メソッドが用意されていたりする

$(xxx).click();

サンプル: カスタムイベント（独自定義したイベント）の設定と発火

▼カスタムイベントの名称を「whole_zebra」とした場合

// 「イベント: whole_zebra」を設定
$(xxx).on('whole_zebra', function(){
  ～ 好きな処理 ～
});

// 「イベント: whole_zebra」を発火
$(xxx).trigger('whole_zebra');

メモ

将来的なメンテナンスにかける時間や他の大人の事情により正論で対応しちゃいけないこともある

▼例）「#btn」を出力する前に処理を追加したい

<html>
～ 省略 ～
<body>

～ 省略 ～

<script>
  $(function() {
    ～ 省略 ～
    $('body').on('whole_zebra', '#btn', function(){
      ～ 省略 ～
    });
  })
</script>

～ 省略 ～

<script>
  if ( xxx ) {
    ～ 省略 ～
    $(xxx).append('<button id="btn">xx</button>');
    ～ 省略 ～

    $('#btn').on('click', function(){
      ～ 省略 ～

      if ( xxx ) {
        $('#btn').trigger('whole_zebra');
      }
    });
  }
</script>
</body>
</html>