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

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对象。

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

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

该MDN文档做得很好，解释了此行为的决定背后的历史。

Answer 2

箭头函数与this ， 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>