jQuery 动态创建后对象为空

Question

我想在创建相应元素后在 class 中添加一个事件侦听器。

在 appendSelectedFilter 函数内的事件侦听器中，我想引用被单击的元素。由于我不能在这种情况下使用 this，因此我尝试创建一个 jQuery 对象并将其解析为 resetThisFilter 函数，但该对象的长度为 0。

我在这里错过了什么？如何将单击的对象解析为另一个函数？

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

Answer 1

接受事件对象作为箭头函数的参数，然后您可以使用事件的 target 属性来检索用户点击的元素：

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

jQuery 动态创建后对象为空

jQuery object is empty after dynamically creating it

javascript

jquery

frontend