Quiero agregar un detector de eventos dentro de una clase después de crear el elemento correspondiente.
En mi detector de eventos dentro de la función appendSelectedFilter , quiero referirme al elemento en el que se hizo clic. Como no puedo usar this en este contexto, traté de crear un objeto jQuery y analizarlo en la función resetThisFilter , pero el objeto tiene una longitud de 0 .
¿Que me estoy perdiendo aqui? ¿Cómo puedo analizar el objeto en el que se hizo clic en otra función?
class RecipeFilter { constructor(filterkategories, response) { this.filterkategories = filterkategories; this.response = response; } appendSelectedFilter(filterItem) { let value = filterItem.children[0].children[0].value; let filter = `<div class="selectedFilter ${value}" ><span class="icon-pk-close"></span>${value}</div>`; if ($(".checked-filter").find(`.${value}`).length === 0) { $(".checked-filter").prepend(filter); } $(document).on("click", ".selectedFilter", () => { this.resetThisFilter($(`.selectedFilter .${value}`)); }); } var recipeFilter = new RecipeFilter(filterkategories, response); recipeFilter.renderFilters(filterkategories); $(document).on("click", ".filter-list-item", function() { recipeFilter.appendSelectedFilter(this); });Acepte el objeto Event como un argumento para su función de flecha, luego puede usar la propiedad de target del evento para recuperar el elemento en el que el usuario hizo clic:
appendSelectedFilter(filterItem) { let value = filterItem.children[0].children[0].value; let filter = `<div class="selectedFilter ${value}" ><span class="icon-pk-close"></span>${value}</div>`; if ($(".checked-filter").find(`.${value}`).length === 0) { $(".checked-filter").prepend(filter); } $(document).on("click", ".selectedFilter", e => { this.resetThisFilter($(e.target)); }); }