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()並單擊按鈕時，它會執行一次。 在第二次調用之后，按鈕現在有兩個單擊事件偵聽器，因此單擊它們將執行兩次，等等。