jQuery object is empty after dynamically creating it

Question

I want to add an event listener inside a class after creating the corresponding element.

In my event listener inside the appendSelectedFilter function I want to refer to the clicked element. Since I can't use this in this context I tried to create a jQuery object and parse it to the resetThisFilter function, but the object has a length of 0.

What am I missing here? How can I parse the clicked object to another function?

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);
  });

Rory McCrossan · Accepted Answer · 2021-12-13 14:46:55Z

1

Accept the Event object as an argument to your arrow function, then you can use the target property of the event to retrieve the element which the user clicked on:

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));
  });
}

edited Dec 13, 2021 at 14:46

answered Dec 13, 2021 at 14:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

proachdp Over a year ago

Thanks! Thats exactly what I was looking for!

Collectives™ on Stack Overflow

jQuery object is empty after dynamically creating it

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related