Jquery 关于事件处理程序和ES2015 arrow函数
我正在将我的一个项目转换为使用ES2015,但在jQuery上遇到了一个问题。在事件处理程序上,自然地使用“this”关键字 下面是我的示例代码:Jquery 关于事件处理程序和ES2015 arrow函数,jquery,ecmascript-6,arrow-functions,Jquery,Ecmascript 6,Arrow Functions,我正在将我的一个项目转换为使用ES2015,但在jQuery上遇到了一个问题。在事件处理程序上,自然地使用“this”关键字 下面是我的示例代码: $(“.actionBtns”)。在('click'、'.editButton',this.handlerEditBtnClick)//上,将为'this'提供所单击按钮的值 $(“.actionBtns”).on('click'、'.editButton'、()=>{this.handlerEditBtnClick()})//将为'this'提供
$(“.actionBtns”)。在('click'、'.editButton',this.handlerEditBtnClick)//上,将为'this'提供所单击按钮的值
$(“.actionBtns”).on('click'、'.editButton'、()=>{this.handlerEditBtnClick()})//将为'this'提供$(“.actionBtns”)中类的值。'on('click'、'.editButton'、()=>{this.handlerEditBtnClick()})
handlerEditBtnClick
函数在不同的上下文中调用(此
引用类),
因为()=>{}
相当于函数(){}.bind(this)
,所以您可以执行以下任一操作
$(“.actionBtns”).on('click'、'.editButton'、()=>{this.handlerEditBtnClick()})
或
$(“.actionBtns”)。在('click','.editButton',this.handlerEditBtnClick.bind(this))
然后,要访问单击的按钮,您可以始终使用e.target
(或e.currentTarget
取决于您的需要)
您也可以这样做(是的,在ES5语法中):
很可能这是因为jQuery在写为“arrow way”(翻译为ES6后)时无法将选择器绑定到函数
在一些特定的情况下检查自己,或者只使用event.target
我想之所以要重新编写,是因为我希望“this”是函数所在的类。我将用更多的代码更新我的问题,以说明我为什么要这样做this@user1560593是的,你的名字就是这样出现的,你应该可以在某个地方更改个人资料:)
function handlerEditBtnClick(e) {
console.log(e.target); // button that was clicked
}
$('.element').click(function (){
$(this)===$('.element') //true
});