为什么事件委派计数为每次点击都点击我的addEventListener（“ submit”）？

Question

大家好！在这种情况下，我想制作一个页面应用程序这始终是添加，加载，编辑或删除HTML元素所必需的然后我发现了一些烦人的问题， 当我的活动提交的每次点击也都在计算该点击时，就像我第二次单击该提交一样，这将导致两次提交数据然后再次单击第三次提交，这将导致三次提交数据，依此类推。 我的代码说明： 我有一个数据表，每行中都有一个用于编辑当前数据的按钮，当用户单击该按钮时，它将在页面上添加一个新表单，而我的问题开始了，当我提交该表单时编辑事件委托正在统计我的活动，这也影响了提交的数据数量

var el_tbl_body = document.getElementById("tbody");
el_tbl_body.addEventListener("click", function (event) {
    var this_el = event.target;
    // Handling error
    if (typeof this_el.attributes.id !== "undefined") {
        // Click only work in id="edit-datatable"
        if (this_el.attributes.id.value === "edit-datatable") {
            // This method for holding add another form edit datatable
            // so it will be only one form
            if (document.getElementById("form-edit-datatable") !== null) {
                document.getElementById("form-edit-datatable").parentNode.remove();
            }
            var new_form = document.createElement("div");
            new_form.innerHTML = 
                '<form action="#" method="POST" id="form-edit-datatable">' +
                    '<input type="text" id="edit-name" value="Example value" required/>' +
                    '<input type="submit" id="submit-edit-datatable" value="Ubah data"/>' +
                '<form/>';
            this_el.parentNode.insertBefore(new_form, this_el);
        }
        
        if (document.getElementById("form-edit-datatable") !== null) {

            // The problem is in here
            document.getElementById("form-edit-datatable").addEventListener("submit", function (ev) {
                ev.preventDefault();
                console.log("data has been send") 
            });
        }
    }
});

<table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
            <tbody id="tbody">
                 <tr>
                     <td>3778</td>
                     <td>John Doe</td>
                     <td>Paris</td>
                     <td><button id="edit-datatable">Edit Data</button></td>
                 </tr>
                 <tr>
                     <td>2353</td>
                     <td>Eric Samuel</td>
                     <td>Hamburg</td>
                     <td><button id="edit-datatable">Edit Data</button></td>
                 </tr>
            </tbody>
        </table>

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事件委托给表单或窗口对象。

Answer 2

修改

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

到

document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });

Answer 3

发生这种情况是因为，当单击Form Submit按钮时，它会传播到form_wrapper单击监听器，该广告将为另一个监听器，依此类推。

您可以避免听form-wrapper点击，只需这样做：

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>';
  document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });
});