javascript - Event is triggered multiple times after a blur (according to how many times the div(pop-up) is displayed as none

Question

I have a 'Blur" Event that triggers a div (pop-up) with a click button on it, if conditions are met. The problem is if I close the div, the next time I use the function it is running the new values and the old values (the ones that were erased in the div).

That is the main function:

td.addEventListener("blur", function(e){
                        event.preventDefault();
                        event.stopPropagation();
                        let qty = td.textContent;
                        let id = e.target.closest('tr').dataset.id;
                        let type = e.target.closest('tr').dataset.type;
                        if (parseInt(qty) >= 0 && isNaN(qty) == false){
                            if (parseInt(qty) !== parseInt(e.target.closest('tr').dataset.indivQty)){
                                document.querySelector('.hover_bkgr_fricc').style.display = 'inline-block';
                                document.querySelector('#reason').value = "";                  
                                document.querySelector('#reason-save').addEventListener('click', function () {
                                    let reason = document.querySelector('#reason').value;
                                    console.log('id'+id);
                                    console.log('qty'+qty);
                                    console.log(reason);
                                    updateQtyinBay(id,qty,type,reason); }, { once: true }, false);
                            }
                            else{
                                return;
                            }
                        }
                        else{
                            swal(qty+' is not a valid number','','error');
                            return;
                        }
                    }, false);

Closing the Pop-Up function (in the DOM)

document.querySelector('.popupCloseButton').addEventListener('click', function() {
        document.querySelector('.hover_bkgr_fricc').style.display = 'none';
        document.querySelector('.hover_bkgr_fricc').removeChild;
        let trs = document.querySelectorAll('#item-table-body tr');
        for (let tr of trs){
            tr.querySelector('.totalQty').textContent = tr.dataset.indivQty;
        };
    });

Function to send data to the back-end:

async function updateQtyinBay(id,qty,type,reason){
    let formData = new FormData();
        formData.append('id', id);
        formData.append('qty', qty);
        formData.append('type', type);
        formData.append('reason', reason);
        let response = await fetch(apiServer+'inventorylocation/updateqty', {method: 'POST', headers: {'DC-Access-Token': page.userToken}, body: formData});
        let responseData = await response.json();
        if (responseData.result == 'success' &&  responseData.equal == false && isNaN(qty) == false){
            swal('Quantity updated successfully!','','success');
            document.querySelector('.hover_bkgr_fricc').style.display = 'none';
            let trs = document.querySelectorAll('#item-table-body tr');
            for (let tr of trs){
                if (tr.dataset.id == id){
                    tr.dataset.indivQty = qty;
                }
            }
        }
}

Console.log after trying to update an item that has 48 quantity closing the pop-up and executing save in the second try:

id1892 locationdetails.js:392:45
qty49 locationdetails.js:393:45
test 1 locationdetails.js:394:45
id1892 locationdetails.js:392:45
qty50 locationdetails.js:393:45
test 1 locationdetails.js:394:45

question from:https://stackoverflow.com/questions/65913264/event-is-triggered-multiple-times-after-a-blur-according-to-how-many-times-the

Answer 1

Waitting for answers