ラボ > Javascript関連:イベント関連

jquery イベントを発火させたい

例えば、formの入力チェックをさせるときの一番最初のとき・・・とか。

作成日:2018-07-31, 更新日:2021-02-15

基本

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

formの入力チェック

▼入力チェック後にしたい内容
・未入力があれば「保存( or 送信)」のボタンを無効化したい

▼入力チェックしなくちゃいけない状況
・新規データの登録
・既存データの編集(既存データが入力チェックの条件を満たしているかは不明)

▼入力チェックしたいタイミング
・入力があったとき
・既存データの編集を行う前

方法

個人的にはイベントを発火させるより、別関数にして実行するほうが好き。

A.イベントを発火させる(trigger())

$(〇〇〇).on('input', '〇〇〇', function(){
  ~ 入力チェック ~
  
  if (〇〇〇) {
    ~ ボタンの有効化 ~
  }
  else {
    ~ ボタンの無効化 ~
  }
});

// 初めて読み込まれたときは強制的にイベントを発火させる
$(〇〇〇).trigger('input');

B.入力チェックを別に関数化

var chkInput = function() {
  ~ 入力チェック ~
  
  if (〇〇〇) {
    ~ ボタンの有効化 ~
  }
  else {
    ~ ボタンの無効化 ~
  }
}

$(〇〇〇).on('input', '〇〇〇', function(){
  chkInput();
});

// 初めて読み込まれたとき
chkInput();

関連項目

JavaScript イベントを発火させたい