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

Question

我有一个函数，可以附加带有输入文本的新 div 和一个带有 add_key 类的 {button}，添加它后我想更改当前按钮的类和文本，但 $(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，请查看文档以获取更多信息。所以最后你有两个选择：

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() {
  $(this).prop('value', 'Delete');
  $(this).toggleClass('add_key del_key');
  $('#main_div').prepend(getUIComponentTemplate());
});

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