Не срабатывает событие на нажатие кнопки c id="id8"

Question

У меня есть модальное окно, в ней форма. Поля формы проверяются на валидацию на чистом JS. После корректного заполнения полей формы пользователь нажимает на кнопку "Отправить данные", после чего появляется 2я кнопка "Подтвердить отправку данных". При нажатии на неё данные будут отправляться на сервер. Проблема в том, что событие на нажатии данной кнопки не работает. Буду рада если кто-то поможет разобраться.

const my_form = document.getElementById("add-form");

function validation(form){
   //Проверка валидации формы
    return result;
}


my_form.addEventListener("submit", function (e) {

  e.preventDefault();

  if (validation(this) == "true") {
    let out='<div class="py-2" id="id8"><button  type="button" class="rounded-4 button3 mx-auto px-auto py-4 my-0" >Подтвердить отправку данных >>></button></div>'
    console.log("Проверка валидации");
    document.querySelector(".alert7").innerHTML = out;
    document.getElementById("id3").style.display = "none";
  }
})

button = document.getElementById('id8');

button?.addEventListener('click', function() {
  alert('Кнопка была нажата!');
});

<div class="modal-body py-0 my-0">
  <form class="form_order my-2" id="add-form" method="POST">
    {% csrf_token %}
    <!--Поля формы - не прописываю)-->
    <div class="py-2" id="id3">
      <button type="submit" class="rounded-4 button3 mx-auto px-2 py-2 my-0">Отправить данные</button>
    </div>
  </form>
  <div class="alert7"></div>
</div>

Answer 1

Обработчик вешается до того как создается кнопка. Нужно или создавать его после этого, или более глобально вешать обработчик с проверкой источника события.

const my_form = document.getElementById("add-form");

function validation(form){
  let result = true;
   //Проверка валидации формы
    return result;
}


my_form.addEventListener("submit", function (e) {

  e.preventDefault();

  if (validation(this) ) {
    let out = '<div class="py-2" id="id8"><button  type="button" class="rounded-4 button3 mx-auto px-auto py-4 my-0" >Подтвердить отправку данных >>></button></div>'
    console.log("Проверка валидации");
    document.querySelector(".alert7").innerHTML = out;
    document.getElementById("id3").style.display = "none";
    
    button = document.getElementById('id8');
    button.addEventListener('click', function() {
      alert('Кнопка была нажата!');
    });    
    
  }
})

<div class="modal-body py-0 my-0">
  <form class="form_order my-2" id="add-form" method="POST">
    {% csrf_token %}
    <!--Поля формы - не прописываю)-->
    <div class="py-2" id="id3">
      <button type="submit" class="rounded-4 button3 mx-auto px-2 py-2 my-0">Отправить данные</button>
    </div>
  </form>
  <div class="alert7"></div>
</div>

БЛОГ НА HUSL

Не срабатывает событие на нажатие кнопки c id="id8"

Ответы (1 шт):