Javascript 函数被多次执行

我无法发现导致函数多次执行的问题

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

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");
    })
}

然后是更新函数，或者代码中的modalEditProduct。 我为此做了一个模态，因为我在使用一个模态时遇到了困难。 所以，这个函数在另一个函数中被调用。我想正是因为这个原因，我才提出了这个问题，这个函数被执行了两次，但是没有！我从那里取出了函数并进行了测试，但问题一直在发生

然后，当单击编辑按钮时，模式将打开。因此，它执行同一个函数中的一些函数

// 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);
    }
}

//更新产品
函数modalEditProduct（）{
让editbns=document.queryselectoral（“#data_products_datas.editbn”）；
让productTitleInput=document.querySelector（“#modalEditProduct表单输入[name='productTitle']”）；
让productCategoryInput=document.querySelector（“#modalEditProduct表单选择[name='productCategory']”）；
让productPriceInput=document.querySelector（“#modaleditProductFormInput[name='productPrice']”）；
让ProductingCreditsInput=document.querySelector（#modaleditProductFormInput[name='ProductComponents']）；
让productDescriptionInput=document.querySelector（“#modalEditProduct表单输入[name='productDescription']”）；
let editSubmitBtn=document.querySelector（“modalEditProduct表单按钮”）；
console.log（editBtns）
editBtns.forEach（元素=>{
元素。addEventListener（“单击”，（e）=>{
让key=e.target.id；
//开放模态
modal_openModal（“modalEditProduct”）；
//获取数据
let data=getData（键）；
//将类别放在select上
cartePorudct_PuttingCategories选择（产品类别输入）；
//让children=productCategoryInput.children；
//console.log（子级）
//for（设i=0；i{
e、 预防默认值（）；
实时数据库验证（“modalEditProduct”，编辑产品数据，密钥）
})
})
});
//获取数据
函数getData（键）{
让数据；
firebase.database（）.ref（“Products/”+key）.on（“value”，snapshot=>{
数据={
标题：snapshot.val（）.title，
类别：snapshot.val（）.category，
price:snapshot.val（）.price，
配料：snapshot.val（），
description:snapshot.val（）.description，
}
});
返回数据；
}
//在字段/输入中插入数据
函数setData（数据）{
productTitleInput.value=data.title；
//productCategoryInput.value=data.category，
productPriceInput.value=data.price；
ProductingCreditsInput.value=data.Components；
productDescriptionInput.value=data.description；
}
//提交表格
功能提交表单（btn，密钥）{
}
//资料
功能编辑\u productData（键）{
让数据={
标题：productTitleInput.value，
类别：productCategoryInput.value，
价格：productPriceInput.value，
成分：生产要素投入价值，
描述：productDescriptionInput.value，
}
//更新
实时数据库更新（“产品”、密钥、数据）；
}
}

---

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

每次调用

modalEditProduct（）

，都会向每个

editBTN

添加一个新的事件侦听器

---

这意味着您第一次调用

modalEditProduct（）

并单击按钮时，它只执行一次操作。第二次调用后，按钮现在有两个单击事件侦听器，因此单击它们将执行两次操作，以此类推。

每次调用

modalEditProduct（）

，您都会向每个

EditBTN

添加一个新的事件侦听器

---

这意味着您第一次调用

modalEditProduct（）

并单击按钮时，它只执行一次操作。第二次调用后，按钮现在有两个单击事件侦听器，因此单击它们将执行两次操作，等等。

您是说我在第一个函数中调用您吗？在这种情况下，这不是问题所在。我把它拿出来了，问题仍然存在。你是说我在第一个函数中给你打电话吗？在这种情况下，这不是问题所在。我把它拿了出来，问题仍然存在