javascript - jQuery 这个选择器在函数中不起作用

Question

我有一个函数，可以在新的 div 中附加输入文本和一个{带有 add_key 类的按钮}，添加它后我想更改当前按钮的类和文本，但是 $(this) 不起作用，甚至我用过this.element 不工作，这是我的点击事件函数

$(document).on('click','.add_key',() => {
   $(this).prop('value', 'Delete');
   $(this).toggleClass('add_key del_key');
   $('#main_div').prepend(getUIComponentTemplate());
});

Answer 1

箭头函数与this有另一种行为，查看DOCS获取更多信息。所以最后你有 2 个选择:

1) 不要使用箭头函数，使用旧的 ES5 方式:

$(document).on('click', '.add_key', function() {
  $(this).prop('value', 'Delete');
  $(this).toggleClass('add_key del_key');
  $('#main_div').prepend(getUIComponentTemplate());
});

2)将this替换为event.currentTarget:

$(document).on('click', '.add_key', event => {
  $(event.currentTarget).prop('value', 'Delete');
  $(event.currentTarget).toggleClass('add_key del_key');
  $('#main_div').prepend(getUIComponentTemplate());
});

这是一个小演示，它通过这两种方式记录元素:

$(document).on('click', '.add_key', function() {
  console.log(this);
});

$(document).on('click', '.add_key', event => {
  console.log(event.currentTarget);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="add_key">CLICK</h1>