Question

我有一个函数，该函数将新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());
});

Answer 1

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

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

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

此MDN documentation做得不错，解释了做出此行为的决定背后的历史。

Answer 2

箭头功能在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>

jQuery此选择器在功能中不起作用

2 个答案: