Formのchangeイベントが何度も走ってしまう

Question

現在cakePHP3,PHP,jQuery,HTMLでアプリケーションを作っています。

前回も質問させていただいた続きです。
https://teratail.com/questions/31009

これを参考にさせていただき、以下のように実装しました。

---

$('form').on("change", function(event){

if(flg){
return false;
}

console.log(1);

});

var flg ;
$(/* リセットボタン */).on("click", function(event){

flg =true;

// リセット処理

flg =false;

$('form').trigger("change");
})

---

フラグの使い方はうまくいったのですが、
最後のtriggerイベントでchangeイベントを発火させると、何度もchangeイベントが発火してしまいます。

Formの変更がある分だけ発火するように思います。

これを1度だけ発火させる方法はないでしょうか？

もしわかる方がいればよろしくお願いします。

Answer 1

最後のtriggerイベントでchangeイベントを発火させると、何度もchangeイベントが発火してしまいます。

「何度も」ってのが何回ぐらいなのかよくわかりませんが、以下に複数回changeイベントが発生する現象を開設してみます。

$("form").on("change", function(){

なので、「form部品の入力内容が変更されたとき」に常にイベントが発生します。

たとえば

<form>
  <div>text1:<input type='text' name='text1' /></div>
  <div>text2:<input type='text' name='text2' /></div>
  <div><input type='button' id='rst' value='reset' /></div>
</form>

のようなhtml部に対して質問文のjavascriptを実行すると、

(1) text1に何かを入力してtext1からフォーカスが外れるタイミング(formの普通の振る舞い)
(2) text2に何かを入力してtext2からフォーカスが外れるタイミング(formの普通の振る舞い)
(3) リセットボタンを押したタイミング(javascriptで追加した振る舞い)

の3つのタイミングでchangeイベントが実行されます。

仮に「text1に何か入力して、すぐにリセットボタンを押す」というオペレーションをやった場合、(1)と(3)が発生することになるのでchangeイベントは2回実行されます。

Comments

[k499778]

回答有り難うございます。
実際、やはりリセットボタン押下でFormの中の変更が複数発生し、
リセット処理が終わったあとでchangeイベントが発生していたため、
リセット処理直後にフラグを元に戻すとうまくいきませんでした。
そこでsetTimeoutを使ってフラグを元に戻すタイミングを遅らせ、
その前にchageイベントが発火し終わるようにするとうまくいきました。
ご協力ありがとうございました。

Answer 2

すみません勘違いでした。
インデント整形して再度確認します。

$('form').on("change", function(event){
　　if(flg){ 
　　　　return false; 
　　}
　　console.log(1);
});

var flg ; 
$(/* リセットボタン */).on("click", function(event){

　flg =true;

　// リセット処理
　flg =false;
　$('form').trigger("change"); 
})

Comments

[k499778]

回答ありがとうございます。

そこを消すとchangeイベントが1度も呼ばれなくなってしまいます。

1度は実行したいので、そのtriggerイベントでchangeイベントの処理を実行しようとしているのですが、
1度だけ発火するかと思いきや、複数回発火してしまう現状です。

1度だけ発火させる方法はないでしょうか。

[k499778]

はい、承知しました(^-^)

[m.kosuda]

上記のコードだけでは問題ないと思います。
ただ、セレクタがformというざっくりした内容なので、changeを発火させた要素を確認してみてはいかがでしょうか？
console.log($(this));

[k499778]

回答有り難うございます。
実際、やはりリセットボタン押下でFormの中の変更が複数発生し、
リセット処理が終わったあとでchangeイベントが発生していたため、
リセット処理直後にフラグを元に戻すとうまくいきませんでした。
そこでsetTimeoutを使ってフラグを元に戻すタイミングを遅らせ、
その前にchageイベントが発火し終わるようにするとうまくいきました。
ご協力ありがとうございました。