Question

在我的网页上，我删除了表格中行上的图标，如下所示：

我正在使用TypeScript，我附加了一个onClick侦听器来执行一个名为OnRemoveClick的函数，就像这样$('.remove').click(this.OnRemoveClick);

OnRemoveClick零个字段（在单击删除图标的行上），然后执行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：this.GetInputFieldsToJson不是函数 HTMLAnchorElement.Index.OnRemoveClick

我意识到这是因为this上下文OnRemoveClick附加到HTMLAnchorElement，这意味着我无法从那里访问我的功能。

我尝试了什么

我尝试使用如下的lambda表达式设置onClick侦听器：

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

但这意味着行上零字段的两个jQuery表达式不再起作用

Answer 1

正如您可能已经理解的那样，这里的问题是，当调用事件处理程序时，默认上下文作为触发该事件的dom元素。因此，您无法使用该引用调用对象的方法。

这个问题有多种解决方案，一个简单的解决方案是使用下面给出的Function.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));

Answer 2

$('.remove').click(() => this.OnRemoveClick);应为$('.remove').click(() => this.OnRemoveClick());，即调用函数。

有关this的更多信息：https://www.youtube.com/watch?v=tvocUcbCupA

TypeScript

2 个答案: