0
class FileManager{

    addResourceRecycleOperation(){
        const actualRecyclerButtons = document.querySelectorAll(
            ".resourcePreviewFrame > ion-icon[name = 'close-outline']"
        );

        for(let i = 0; i < actualRecyclerButtons.length; i++){
            //Aquí se añade el evento oyente
            actualRecyclerButtons[i].addEventListener("click", this.confirmDiscardResource);
        }
    }

    confirmDiscardResource(ev){

        const value = confirm("¿Realmente deseas quitar este elemento de la lista de carga?");
        //Aquí se intenta remover el evento oyente.
        if(value) ev.currentTarget.removeEventListener("click", this.confirmDiscardResource);

    }

}

El metodo addResourceRecycleOperation se ejecuta después de que los archivos hayan sido añadidos a una cola, simplemente para añadirles un botón de eliminarlos si el usuario quiere eliminarlos de la cola, donde el elemento html se ve así:

<div class="resourcePreviewFrame">
     //Este es el elemento al que se le añade el click
     <ion-icon name = "close-outline"></ion-icon>
     <img src="images/buttons_images/document-icon.png" alt="">
</div>

Imprimí en consola this.confirmDiscardResource dentro del metodo confirmDiscardResource y el resultado es undefined, así que ya se lo que pasa... pero entonces como recupero el contexto para poder quitar este evento oyente?.

Nota: ya probe bind, no funciono.

Alguna idea?

1 respuesta 1

0

Puedes usar arrow functions () => {} este tipo de funciones se añadieron en ES7 y no tienen binding local. El this siempre hace referencia al objeto en el que estan.

class FileManager{

    addResourceRecycleOperation(){
        const actualRecyclerButtons = document.querySelectorAll(
            ".resourcePreviewFrame > [name='close-outline']"
        );

        for(let i = 0; i < actualRecyclerButtons.length; i++){
            //Aquí se añade el evento oyente
            actualRecyclerButtons[i].addEventListener("click", this.confirmDiscardResource);
        }
    }

    confirmDiscardResource = (ev) =>  {
				console.log(this.confirmDiscardResource)
        const value = confirm("¿Realmente deseas quitar este elemento de la lista de carga?");
        //Aquí se intenta remover el evento oyente.
        if(value) ev.currentTarget.removeEventListener("click", this.confirmDiscardResource);

    }

}

new FileManager().addResourceRecycleOperation();
<div class="resourcePreviewFrame">
     <span name="close-outline">x</span>
</div>

1
  • Muchisimas gracias hawks, si, me funciono :3
    – Layer
    Commented el 18 abr. 2020 a las 23:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.