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 мне нужно «это» быть классом, но я также хочу получить доступ к нажатой кнопке.

Моя попытка (вторая строка в приведенном выше коде) не дает мне доступ к элементу кнопки 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 
 
}

Вы можете увидеть, где мне нужно 'это' в быть двумя разными вещами .. Я не совсем Конечно, как вызвать функцию editItem изнутри handlerEditBtnClick, кроме 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 cann ot для переключения функции, когда она написана «стрелка» (после перевода на ES6).

Проверял себя на нескольких конкретных случаях или просто использовал event.target.