jQueryのアロー関数内からはthisがundefinedになる

背景

jqueryの on('click', ()=> {}) でのアロー関数内から、クリックされたタグに付加したdata属性にアクセスしたい。

事象

上記アロー関数内で $(this) を参照しても、 undefined になってしまい、クリックされたタグにアクセスできない。

解決策

$(this) ではなく、 アロー関数の引数からタグを取得する。
アロー関数の引数にcurrentTargetという変数があり、それが目的のタグに該当する。

NG

$('.link').on('click', () => {
     $(this).data('id')   // undefined
});

OK

$('.link').on('click', (e) => {
     $(e.currentTarget).data('id')   // 値が取れる
});