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

【问题标题】：jQuery this selector not working in functionjQuery这个选择器在函数中不起作用
【发布时间】：2018-12-16 02:17:01
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery ecmascript-6

【解决方案1】：

箭头函数与this 有另一种行为，请查看DOCS 了解更多信息。所以最后你有两个选择：

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>

【讨论】：

@hezha，很高兴听到这个消息

【解决方案2】：

您正在使用箭头函数来定义事件回调，它没有this 值，而是使用封闭执行上下文的this。在这种情况下，这将是 document 对象。

如果您想利用 .add_key 选择器的 this 上下文，您需要使用函数语法：

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

MDN documentation 这个MDN documentation 很好地解释了做出这种行为的决定背后的历史。

【讨论】：