Function 被多次执行

Question

我无法发现导致 function 多次执行的问题。

下面的代码片段是当页面打开或发生更改时，无论是新数据还是更改数据。 这个function是从银行取数据来展示的，这部分我就不展示了，因为没必要。 显示后，它调用了两个函数，第一个给我带来了问题，更新 function。

function carteProduct_listProducts() {
    let dataProductsDatas = document.getElementById("data_products_datas");

    firebase.database().ref("Products").on("value", snapshot => {
        dataProductsDatas.innerHTML = ""

        snapshot.forEach(element => {
            ...
        });

        // Edit buttons event listener
        // Update
        modalEditProduct()
        

        // Delete
        realtimedb_delete("Products");
    })
}

然后是更新 function，或者在代码中，modalEditProduct。 我为此制作了一个模态，因为我只使用一个模态时遇到了麻烦。 所以，这个 function 在另一个 function 中被调用。 我认为正是因为这个原因，我才给出了这个问题，function 被执行了两次，但是没有，我把 function 拿出来并测试了它。 但问题一直在发生。

然后，当单击编辑按钮时，模式将打开。 因此它执行相同 function 中的一些功能

// Update product
function modalEditProduct() {
    let editBtns = document.querySelectorAll("#data_products_datas .editBtn");
    let productTitleInput = document.querySelector("#modalEditProduct form input[name='productTitle']");
    let productCategoryInput = document.querySelector("#modalEditProduct form select[name='productCategory']");
    let productPriceInput = document.querySelector("#modalEditProduct form input[name='productPrice']");
    let productIngredientsInput = document.querySelector("#modalEditProduct form input[name='productIngredients']");
    let productDescriptionInput = document.querySelector("#modalEditProduct form input[name='productDescription']");
    let editSubmitBtn = document.querySelector("#modalEditProduct form button");
    console.log(editBtns)
    editBtns.forEach(element => {
        element.addEventListener("click", (e) => {
            let key = e.target.id;
            // Open modal
            modal_openModal("modalEditProduct");
            
            // Get the data
            let data = getData(key);

            // putting categories on select
            cartePorudct_puttingCategoriesSelect(productCategoryInput);
            // let children = productCategoryInput.children;
            // console.log(children)
            // for (let i = 0; i < children.length; i++) {
            //     const element = children[i];
            //     console.log(element)
            // }

            // Insert the data in the field/inputs
            setData(data);

            // Submit form
            editSubmitBtn.addEventListener("click", (e) => {
                e.preventDefault();
    
                realtimedb_verification("modalEditProduct", edit_productData, key)
            })
        })
    });

    // Get the data
    function getData(key) {
        let data;
        firebase.database().ref("Products/"+key).on("value", snapshot => {
            data = {
                title: snapshot.val().title,
                category: snapshot.val().category,
                price: snapshot.val().price,
                ingredients: snapshot.val().ingredients,
                description: snapshot.val().description,
            }
        });
        return data;
    }

    // Insert the data in the field/inputs
    function setData(data) {
        productTitleInput.value = data.title;
        // productCategoryInput.value = data.category,
        productPriceInput.value = data.price;
        productIngredientsInput.value = data.ingredients;
        productDescriptionInput.value = data.description;
    }

    // Submit form
    function submitForm(btn, key){
        
    }

    // Data
    function edit_productData(key) {
        let data = {
            title: productTitleInput.value,
            category: productCategoryInput.value,
            price: productPriceInput.value,
            ingredients: productIngredientsInput.value,
            description: productDescriptionInput.value,
        }

        // Update
        realtimedb_update("Products", key, data);
    }
}

无论如何，问题是。 当我打开一个模式，进行更改并保存时，一切都很好。 如果我打开另一个数据的模态，点击提交按钮后，之前的数据也会随着该数据的值而改变。 如果我打开第三个模式，一切都会再次发生。

Answer 1

每次调用modalEditProduct()时，都会为每个editBtns添加一个新的事件侦听器。

这意味着您第一次调用modalEditProduct()并单击按钮时，它会执行一次。 在第二次调用之后，按钮现在有两个单击事件侦听器，因此单击它们将执行两次，等等。