为什么事件授权将我的事件提交增加了两倍？

Question

大家好！在这种情况下，我想制作一个页面应用程序这始终是添加，加载，编辑或删除HTML元素所必需的然后我发现一个烦人的问题，当我的事件提交的每次点击都翻倍时就像我第二次单击该提交一样，这将导致两次提交数据然后再次单击第三次提交，这将导致三次提交数据，依此类推。 这里是我的错误代码示例：

var btn_addNewForm = document.getElementById("add-newForm");
var form_wrapper = document.getElementById("form-wrapper");

btn_addNewForm.addEventListener("click", function (event) {
  form_wrapper.innerHTML =
    '<form action="#" method="POST" id="new-form">' +
      '<input type="submit" value="Form Submit"/>'
    '</form>';
});

// Start Event Delegation
form_wrapper.addEventListener("click", function(event){
  document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });
});

<button id="add-newForm">Add New Form</button>
<div id="form-wrapper"></div>

Answer 1

    var btn_addNewForm = document.getElementById("add-newForm");
var form_wrapper = document.getElementById("form-wrapper");

btn_addNewForm.addEventListener("click", function (event) {
  form_wrapper.innerHTML =
    '<form action="#" method="POST" id="new-form">' +
      '<input type="submit" value="Form Submit"/>'
    '</form>';
});

// Start Event Delegation
window.addEventListener("submit", function(event){
    event.preventDefault();
    console.log("Form Data")
    })

    <button id="add-newForm">Add New Form</button>
    <div id="form-wrapper"></div>

查看可能有帮助的更改。您可以将Submit事件委托给表单或窗口对象。