jQuery .on 事件处理程序和 ES2015 箭头函数

Question

我正在将我的一个项目转换为使用 ES2015，但是当涉及到 jQuery 的 .on 事件处理程序时，我运行遇到了问题，与 'this'关键字自然..

这是我的示例代码：

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick) //Would give 'this' the value of the button clicked
$(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()}) //Would give 'this' the value of the class

我不确定我应该如何重写上面代码中的第一行以使用 ES2015。

在函数 handlerEditBtnClick 中，我需要 'this' 成为 class，但我还想访问被单击的按钮。

我的尝试（上面代码中的第二行）没有让我访问被单击的按钮 DOM 元素 - 至少我无法想到访问它。

谢谢，

卢克

编辑这是 handlerEditBtnClick() 函数：

handlerEditBtnClicked() {
  var $item = $(this); //This isn't re-written yet, so 'this' actually refers to the edit button that was clicked
  this.editItem($item); //This is where I need 'this' to be the class
}

你可以看到我需要 'this' 的地方是两个不同的东西。我不完全确定如何从 handlerEditBtnClick 中调用 editItem 函数，而不是 this.editItem();

请注意这些名称只是通用名称，以便于输入

Answer 1

在$(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()}) handlerEditBtnClick 函数在不同的上下文中调用（this 指的是 class），
因为 ()=>{} 等同于 function(){}.bind(this) 所以你可以做

$(".actionBtns").on('click', '.editButton', () => {this.handlerEditBtnClick()})

或

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick.bind(this))

然后要访问被单击的按钮，您可以随时使用 e.target
（或 e.currentTarget 取决于您的需要）

function handlerEditBtnClick(e) {
 console.log(e.target); // button that was clicked
}

Answer 2

你也可以这样做（是的，在 ES5 语法中）：

$('.element').click(function (){
    $(this)===$('.element') //true
});

可能是因为jQuery写成"arrow way"时无法绑定选择器函数（转ES6后）

检查了几个具体案例，或者只使用 event.target。

jQuery .on 事件处理程序和 ES2015 箭头函数

jQuery .on event handler and ES2015 arrow function

jquery

ecmascript-6

arrow-functions