主页 / 问题 / 1573928
Accepted
Светлана
Asked:2024-03-30 18:08:10 +0000 UTC2024-03-30 18:08:10 +0000 UTC

按下 id="id8" 按钮的事件不会触发

  • 772

我有一个模态窗口，其中有一个表单。使用纯 JS 检查表单字段的有效性。正确填写表单字段后，用户单击“提交数据”按钮，然后出现第二个按钮“确认发送数据”。当您点击它时，数据将被发送到服务器。问题是按钮点击事件不起作用。如果有人帮助我解决这个问题，我会很高兴。

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>

javascript

1 个回答

  1. Best Answer

    处理程序在创建按钮之前挂起。您需要在此之后创建它，或者添加一个更全局的处理程序来检查事件源。

    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>

    • 0

相关问题