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'作为类，但我也想要访问被点击的按钮。

我的尝试（上面代码中的第二行）没有让我访问被点击的按钮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函数在diffarent上下文中调用（this引用类），
因为()=>{}相当于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之后）编写时，jQuery无法将选择器绑定到函数中。

在几个特定情况下检查自己，或者只使用event.target。

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

2 个答案: