jQuery - Получить данные из div по клику

Question

Я пытаюсь получить доступ к идентификатору данных моего div по клику. Доменные модели - это проекты и задачи для пользователей. Это моя текущая реализация (рабочая):

  // script-tag bottom of user-page.html, before footer include (jinja2)
  const projects = '{{projects | count}}';
  for (let i = 1; i <= projects; i++) {
    const click_id = `#clickable-${i}`;

    $(click_id).on("click", () => {
        const data = $(click_id).data();
        redirectToProjectPage(data);
    });
  }

и html:

  {% for project in projects %}
    <div id="clickable-{{loop.index}}" data-id="{{project.id}}" style="display:inline-block;">
       ... stuff.
    </div>
  {% endfor %}

Теперь я попытался реализовать рефакторинг с использованием jQuery .each и jQuery .on, просматривая SO и ссылаясь на документацию jQuery, но следующий код выдает undefined для меня. Примечание: в html я поменял идентификатор на класс «clickable».

  $('.clickable').each(() => {
      const $this = $(this);
      $this.on('click', () => {
          const id = $(this).data('id')
          console.log(id) // produces undefined
          redirectToProjectPage(id)
      });
  });

Как мне продолжить?

Answer 1

Вы столкнулись с Javascript печально известной проблемой L oop? .

Используйте $(this) в обработчике кликов. Чтобы это работало, вы должны использовать обычную функцию, а не функцию стрелки.

  const projects = '{{projects | count}}';
  for (let i = 1; i <= projects; i++) {
    const click_id = `#clickable-${i}`;

    $(click_id).on("click", function() {
        const data = $(this).data();
        redirectToProjectPage(data);
    });
  }

У вас такая же проблема в вашем .each() l oop. Он не может передать текущий элемент в this функции стрелки.

Являются ли «Функции стрелки» и «Функции» эквивалентными / заменяемыми?

Answer 2

$ (this) не будет работать, если вы используете функцию стрелки, если вам нужно использовать $ (this), вы должны использовать функцию () {}, в противном случае, если вам нужно использовать функцию стрелки, вы должны передать параметр события и можно использовать элемент с помощью $ (event.currentTarget)

$('element').click(function () { 
    const data = $(this).data('id'); 
});

else,

$('element').click((event) => { 
    const data = $(event.currentTarget).data('id');
});