JS za dużo akcji

Question

Cześć 

Mam pewien problem z kodem js. Stworzyłem własne okno confirm ale mam pewien z nim problem.Otóż po pierwszym kliknięciu wszystko zachowuje się normalnie , ale po drugim kliknięciu wykonują się aż 4 na raz zapytania do serwera.Problem leży z moim oknem confirm a Mianowice ze zdarzeniem potwierdzanie.Tylko nie za bardzo wiem jak to naprawić ?

js

function deletSubstance(val,name,url) {
    let change = document.getElementById("importantinfo");
    let status = document.getElementById("accesRemove");
    console.log(url);
    if(status !== true){
        document.getElementById("NameToDelete").innerHTML = name;
        change.style.display = "block";
    }
    status.addEventListener('click', function() {
        viewComunicat();
        $(document).ready(function(){
            $.ajax({
                url: url,
                type: 'POST',
                success: function (data) {
                    if(data != null){
                        change.style.display = "block";
                        document.getElementById("SubstancjonExist").innerHTML = data;
                    }else {
                        $('#'+val+'').parent().parent().remove();
                    }
                },
            });
        });
    }, true);
}

okno confirm

<div id="importantinfo" style="display: none" class='dominationInfo'>
    <div>
        <div>
            <i onclick="viewComunicat()" class="icon-cancel-1 ikonaDelete"></i>
            <div id="SubstancjonExist">
                <h4>Czy chcesz usunąć: <b id="NameToDelete"></b> </h4>
                <div class="importantinfo__button">
                    <div class="importantinfo__button--danger">
                        <button id="accesRemove" class="btn btn-danger btn">Usuń</button>
                    </div>
                    <div class="importantinfo__button--primary">
                        <button onclick="viewComunicat()" class="btn btn-primary btn">Powrót</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Z góry dziękuje za podpowiedź 

Answer 1

Tak na oko: jeśli wielokrotnie wywołujesz deleteSubstance, to wielokrotnie wywołuje się status.addEventListener('click' - tak więc przycisk ma przypisanych wiele identycznych handlerów, więc wszystkie się wywołają.

Albo dodaj event handler raz przy otwieraniu strony, albo czyść handlery przy każdym pokazaniu modala (zakładam że to modal).

BTW, strasznie łamany ten angielsko-polski :(

I ten document.ready jest tam zupełnie niepotrzebny.

Comments

A jak mogę dodać czyszczenie do

addEventListener

łamany ten angielsko-polski ? masz na myśli ,że gdzie w niektórych miejscach są polskie słowa,czy błędy ?

---

zrobiłem coś takiego , i za drugim kliknięciem już nie wysyła 4 ,ale 2 zapytania 

let change = document.getElementById("importantinfo");
    let status = document.getElementById("accesRemove");
    console.log(url);
    if(status !== true){
        document.getElementById("NameToDelete").innerHTML = name;
        change.style.display = "block";
    }
    status.addEventListener('click', function() {
        viewComunicat();
        $('#'+val+'').parent().parent().remove();
            $.ajax({
                url: url,
                type: 'POST',
                success: function (data) {
                    if(data != null){
                        change.style.display = "block";
                        document.getElementById("SubstancjonExist").innerHTML = data;
                    }else {
                        status.removeEventListener('click',function () {},false);
                    }
                },
            });
    }, true);

 

---

Czyść zawsze Listener, choć osobiście szedłbym w stronę rozwiązania: 

dodaj event handler raz przy otwieraniu strony

---

A jak mogę wyczyścić tego linsera ? , event Handler czyli jak ?

---

Używasz funkcji anonimowej, więc trochę słabo (chyba że sztuczkami). Albo 'wyeksportuj' tą funkcję gdzieś na zewnątrz i potem podawaj jej tylko nazwę albo prostu nadaj jej nazwę lokalnie tak: 

    status.addEventListener('click', function _jakasNazwa() {
   

i wtedy wręcz wewnątrz tej funkcji możesz wrzucić:

status.removeEventListener("click", _jakasNazwa, true);