【JavaScript】イベントが突然発火しなくなった？documentでくくってみよう。

はじめに

この記事にたどり着いた方はなんかボタンクリックしてもJSでイベントが発火しないというエラーを解決したくて訪れる人が多いかと思います。

自分も実務でこの通常時はイベント発火するのになぜかイベントが発火しない時があるというエラーに2回も遭遇しました。結構よくある事象なのかと思いここに備忘録として残しておきたいと思います。

実際にあった事例

1.非同期で切り替えた時（期間指定やチェックボックス選択時）に、JSで実装していたCSVダウンロードボタンが機能しなくなっていた。
2.投稿フォームの投稿ボタンに対しクリックイベントを追加していたが、投稿ボタンクリック時に他のエラーが非同期で発動した後、クリックイベントが発火しなくなった。

結論

(document).on("click", elementにして動的に追加したDOMに対してもJS発火するよう修正すればイベント発火が問題なくされる。

sample.js

//Before
$(".open-csv-modal").on("click",() => {
  //イベント内処理//
});

//After
$(document).on("click", ".open-csv-modal", () => {
  //イベント内処理//
});

ところでDOMってなに？

HTMLをプログラムで色々操作するための仕組みのこと。
今回だとこのボタンを押したらこういった動きをさせるようDOM操作を行うみたいな感じ。

基本HTML上のクラスやid、あとは普通のタグを指定、それに対しどういった操作をするかをJavaScriptで記述していく。他にも文字の色を変えたり、文字をサイト上に挿入したりDOM操作で色々できる。

参考

あとがき

今回は日付選択した後やフォーム投稿時に非同期でエラーが出た後など、非同期後でもクリックイベントなどのイベント発火がされるようどう記述したらいいのかを備忘録として残しておきました。

今後通常時は動くのに何故かイベント発火しなくなったなどあればこれを疑うのも良いかもしれません。