0

Tengo una clase, en el constructor esta crea y agrega una lista de elementos al DOM, a la vez le asigna un evento CLICK a cada elemento(li). La función que ejecuta ese evento necesita acceder al elemento que disparó el evento, pero también a una de las propiedades de la clase, si uso this solo puedo acceder a una de esas dos cosas, me he creado una función en la clase que me permita acceder a la propiedad de la clase y desde la función del evento acceder al elemento que lo dispara para desde ahí llamar a la función que accede a la propiedad de la clase, pero no se como llamar a esa función, si uso this no va funcionar porque hace referencia al elemento que disparo el evento y si la intento llamar sin el, me presenta un error.

clase.js

class MyClass {
    constructor(_contenedor) {
        this.contenedor = _contenedor;
    }
    iniciar() {
        let html =
                    '<p>Seleccione algo</p>' +
                    '<ul>' +
                        '<li>Uno</li>' +
                        '<li>Dos</li>' +
                        '<li>Tres</li>' +
                    '</ul>';
        $(this.contenedor).append(html);
        $(this.contenedor + ' li').click(this.seleccionar_opcion);
    }
    seleccionar_opcion() {
        let op_texto = $(this).html();
        cambiar_opcion(op_texto);
    }
    cambiar_opcion(nueva_opcion) {
        $(this.contenedor + ' p').html(nueva_opcion);
    }
}

miscript.js
(function () {
    let prueba = new MyClass('#company-filter');
    $(document).ready(function () {
        prueba.iniciar();
    });
})();

3

2 respuestas 2

2

Tambien puedes hacerlo creando otra variable para referirte a this asi:

class MyClass {
    constructor(_contenedor) {
        this.contenedor = _contenedor;
    }
    iniciar() {
        let that = this;
        let html =
                    '<p>Seleccione algo</p>' +
                    '<ul>' +
                        '<li>Uno</li>' +
                        '<li>Dos</li>' +
                        '<li>Tres</li>' +
                    '</ul>';
        $(this.contenedor).append(html);
        $(this.contenedor + ' li').click(function() {
          let op_texto = $(this).html();
          $(that.contenedor + ' p').html(op_texto);
        });
    }
    
}


    let prueba = new MyClass('#company-filter');
    $(document).ready(function () {
        prueba.iniciar();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="company-filter"></div>

0

He logrado lo que necesitaba, asigne el evento con la función on esta permite agregar datos al llamado, en esos datos envío la propiedad de la clase que quería acceder.

    class MyClass {
        constructor(_contenedor) {
            this.contenedor = _contenedor;
        }
        iniciar() {
            let html =
                        '<p>Seleccione algo</p>' +
                        '<ul>' +
                            '<li>Uno</li>' +
                            '<li>Dos</li>' +
                            '<li>Tres</li>' +
                        '</ul>';
            $(this.contenedor).append(html);
            $(this.contenedor).on('click', 'li', this.contenedor, this.seleccionar_opcion);
        }
        seleccionar_opcion(event) {
            let op_texto = $(this).html();
            $(event.data + ' p').html(op_texto);
        }
    }

    let prueba = new MyClass('#company-filter');
        $(document).ready(function () {
            prueba.iniciar();
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="company-filter"></div>

Me eliminé la otra función también. . .

Documentación evento on

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
2
  • Con tu permiso edito tu respuesta con algo más de información sobre los delegados en el evento "on" y añado el snippet con el código funcionando tal y como lo has puesto.
    – Kiko_L
    Commented el 31 oct. 2018 a las 20:46
  • Excelente @Kiko_L Commented el 2 nov. 2018 a las 13: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.