Question

$("body").on('click', 'ul#ajax-users-list>li', () => {
    console.log( $(this).data('id') );
});

此代码返回undefined，因为$(this) = [Window]。

如何访问触发点击事件的元素的数据属性？

Answer 1

问题是因为您正在使用箭头函数，因此处理函数的范围将保持在定义的级别。如果您使用传统的匿名函数，逻辑将正常工作：

$("body").on('click', 'ul#ajax-users-list>li', function() {
  console.log($(this).data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ajax-users-list">
  <li data-id="foo">click me</li>
</ul>

如果您更喜欢使用箭头功能，那么您需要从提供的event参数而不是this参考中获取引发事件的元素：

$("body").on('click', 'ul#ajax-users-list>li', (e) => {
  console.log($(e.target).data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ajax-users-list">
  <li data-id="foo">click me</li>
</ul>

触发事件时，`this`属于window对象

1 个答案: