"Этот" объем в машинописи

На моей веб-странице у меня есть удалить значки на строках в таблице, как это:

Введите описание изображения здесь

Я использую TypeScript, где я прикрепил прослушиватель onClick для выполнения функции под названием OnRemoveClick, как это $('.remove').click(this.OnRemoveClick);

OnRemoveClick нули 2 поля (в строке щелкается значок Удалить), а затем выполняет 2 функции, например: 

private OnRemoveClick(): void {
    $(this).parents('tr').find('.input-qty').val('0');
    $(this).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

Проблема у меня в том, что он падает, когда я добираюсь до GetInputFieldsToJson я получаю:

TypeError: это.GetInputFieldsToJson не является функцией на HTMLAnchorElement.Индекс.OnRemoveClick

Я понимаю, что это потому, что this в контексте OnRemoveClick присоединен к HTMLAnchorElement, что означает, что я не могу получить доступ к своим функциям оттуда.

Что я пробовал

Я попытался установить слушатель onClick с лямбда-выражением следующим образом:

$('.remove').click(() => this.OnRemoveClick);

Но это означает, что два выражения jQuery для нулевых полей в строке больше не работают

2 7
javascript jquery this typescript

2 ответа:

Как вы, возможно, уже поняли, проблема здесь заключается в том, что при вызове обработчика событий контекст по умолчанию является элементом dom, который инициировал это событие. Таким образом, вы не можете вызвать метод вашего объекта, используя эту ссылку.

Существует несколько решений этой проблемы, одним из простых решений является передача пользовательского контекста функции обратного вызова с помощью функции.bind (), как указано ниже, и получить доступ к целевому элементу с помощью Event.currentTarget в обратном вызове как

private OnRemoveClick(e): void {
    $(e.currentTarget).parents('tr').find('.input-qty').val('0');
    $(e.currentTarget).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

Затем 

$('.remove').click(this.OnRemoveClick.bind(this));
5

$('.remove').click(() => this.OnRemoveClick); должно быть $('.remove').click(() => this.OnRemoveClick());, т. е. вызовите функцию.

Подробнее this : https://www.youtube.com/watch?v=tvocUcbCupA

-1