こんにちは。
初歩的な質問ですみません。
編集画面でのクリックイベントにつまずいてしまいましたので、ご教示いただけませんでしょうか。
①編集画面のイベントで以下コードをクリックして実行→「保存」とします。
$(document).on('click', '.field-5530318', function () {
console.log('run');
});
②そのまま移動せずに「レコードを編集する」をクリックします。
③また編集画面で上記コードをクリックして実行します。
上記①ではコンソールに「run」と一度表示されるだけなのですが、上記③では一度のクリックで2回「run」と表示されます。
また上記①〜③を繰り返すと「run」の表示が一度のクリックで3回、4回と増えていきます。
$(document) にイベントを設定していることが原因なのでしょうか。
ご教示いただけますと幸いです。
編集画面での画面遷移ではdocumentの更新がなく、イベントが追加されてしまうため、
編集保存を繰り返すとその回数分、一回のクリックに対しての処理が増えるかと思います。
現状oguraさんの場合、
event.create.showまたはevent.edit.show→クリックイベント追加
保存→再編集→event.editshow→クリックイベント追加
…n回→n回クリックイベント追加
ということが起こっています。
jqueryのイベントは追加式と過去の記事を見つけました、数年前のものなので
現在のバージョンでは変更されているか調べていませんが、こちら参考になるかと。
jsのaddEventListenerは重複するイベントは登録しないようです。
しかし、下記にあるようにoguraさんの場合は無名関数なので、書き方を変える必要がありますね。
複数の同一の
EventListenerが、同じEventTargetに同じ引数で登録された場合、重複するインスタンスは反映されません。EventListenerが 2 回呼び出されることはなく、重複するインスタンスは反映されないので、removeEventListener()で手動で削除する必要はありません。ただし、無名関数をハンドラーとして使用する場合、そのようなリスナーは同じにはならないことに注意してください。無名関数はループ内であっても繰り返し呼び出されるだけで、同じソースコードを使って定義されていても同じにはならないためです。
引用：MDN