باگ توی اضافه کردن EventListener

در کد زیر باگ نهفته ای وجود دارد. یک دکمه حذف یک ردیف از جدول وجود دارد که وقتی روی آن کلیک میکنیم. eventListener به آن اضافه میشود. باگ به این شکل از که به هر تعداد کلیک بر روی این دکمه EventListener اضافه میشود. تا زمانی که صفحه رفرش شود. این باگ موجب میشود که در نهایت به تعداد eventListener ها درخواست به سرور ارسال میشود.

function deleteLink(link_id){
        console.log(link_id);
        const saveBtn = document.querySelector("#deleteModal .btn-primary");
        saveBtn.addEventListener('click', () => {
            deleteRow(link_id)
        })
    }

function deleteLink(link_id){

console.log(link_id);

const saveBtn = document.querySelector("#deleteModal .btn-primary");

saveBtn.addEventListener('click', () => {

deleteRow(link_id)

})

}

برای حل این مشکل باید هر وقت خواستیم EventListener اضافه کنیم، قبلی را پاک کنیم.

function deleteLink(link_id){
        const confirmBtn = document.querySelector("#deleteModal .btn-primary");
        const newConfirmBtn = confirmBtn.cloneNode(true);
        confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

        newConfirmBtn.addEventListener('click', () => {
            deleteRow(link_id);
        });
    }

function deleteLink(link_id){

const confirmBtn = document.querySelector("#deleteModal .btn-primary");

const newConfirmBtn = confirmBtn.cloneNode(true);

confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

newConfirmBtn.addEventListener('click', () => {

deleteRow(link_id);

});

}

دیدگاهتان را بنویسید لغو پاسخ