JavaScript : querySelectorAll x addEventListener の反映について

Question

以下のようにコードを書いていますが、closeBtnが機能しません。
なぜでしょうか。
教えていただければ幸いです。

const body = document.getElementById("body");
const plus = document.getElementById("plus");
let closeBtn = document.querySelectorAll(".close");

plus.addEventListener("click", function () {

  for (i = 0; i < 5; i++) {
    body.innerHTML += `
    <div class="form-body" id="form-body-${i + 1}">
      <div class="close">
        <p>X</p>
      </div>
    </div>
    `;
  }
  closeBtn = document.querySelectorAll(".close");
});

closeBtn.forEach(function (closeBtn) {
  closeBtn.addEventListener("click", function () {
    console.log("work");
    }
  });
});

        <div class="main-body" id="body"></div>
        <div class="main-body">
          <div class="form-body plus" id="plus">
            <p>+</p>
          </div>
        </div>

Answer 1

closeBtn.forEach() が plus をクリックするより前に実行されるので、plus をクリック時に追加された class="close" の要素にはイベントリスナが登録されていません。

動的に追加される要素にいちいちイベントリスナを登録するのは面倒なので、イベントデリゲーションを使うのが定石です。

document.addEventListener('click', e => {
  if (e.target.closest('.close')) {
    console.log("work");
  }
});

Comments

[CatBot]

ありがとうございます。このような方法もあると勉強になりました。

Answer 2

「plus」がクリックされないと、「.close」のボタンが画面上には配置されないため、「.close」のイベントを設定時はまだ、「.close」のエレメントが存在しないからではないでしょうか。

エレメント作成後にクリックイベントを設定すると動きませんでしょうか。

const body = document.getElementById("body");
const plus = document.getElementById("plus");
let closeBtn = document.querySelectorAll(".close");

plus.addEventListener("click", function () {

  for (i = 0; i < 5; i++) {
    body.innerHTML += `
    <div class="form-body" id="form-body-${i + 1}">
      <div class="close">
        <p>X</p>
      </div>
    </div>
    `;
  }
  closeBtn = document.querySelectorAll(".close");
  // ↓ここに移動
  closeBtn.forEach(function (closeBtn) {
    closeBtn.addEventListener("click", function () {
      console.log("work");
      }
    });
  });
});
/* エレメント作成後にイベントを付与するように処理を移動
closeBtn.forEach(function (closeBtn) {
  closeBtn.addEventListener("click", function () {
    console.log("work");
    }
  });
});
*/

Comments

[CatBot]

こちらも試していましたが、一回しか効かず困っていまして。
ベストアンサーの答えが1番有効判断いたしました。
ありがとうございます。