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

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>