2015-07-24 39 views
7

Trên trang web của tôi, tôi có loại bỏ các biểu tượng trên các hàng trong một bảng như thế này:'này' phạm vi trong nguyên cảo

enter image description here

Tôi đang sử dụng nguyên cảo nơi tôi có kèm theo một onClick nghe để thực hiện một chức năng gọi là OnRemoveClick , như thế này $('.remove').click(this.OnRemoveClick);

OnRemoveClick số không 2 lĩnh vực (trên hàng vào biểu tượng xóa được nhấp) và sau đó thực hiện 2 chức năng, như thế này:

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

Tôi có vấn đề là nó té ngã hơn khi tôi nhận được để GetInputFieldsToJson tôi nhận được:

TypeError: this.GetInputFieldsToJson is not a function at HTMLAnchorElement.Index.OnRemoveClick

Tôi nhận ra đó là vì this trong bối cảnh OnRemoveClick được gắn vào HTMLAnchorElement có nghĩa là tôi không thể truy cập của tôi chức năng từ đó.

Những gì tôi đã cố gắng

Tôi đã cố gắng thiết lập người nghe onClick với một biểu thức lambda như thế này:

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

nhưng điều đó có nghĩa là hai biểu thức jQuery để zero lĩnh vực trên hàng không còn hoạt động

+6

'$ ('xóa') bấm (this.OnRemoveClick.bind (this));' sau đó 'tin OnRemoveClick (e):. khoảng trống {$ (e.currentTarget) .parents () ...} ' –

+1

https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript –

+0

@Arun P Câu trả lời của Johny là chính xác. Điều này sẽ làm việc cũng $ ('. Remove'). Click (() => this.OnRemoveClick()) – Martin

Trả lời

5

Như bạn có thể đã hiểu, vấn đề ở đây là, khi xử lý sự kiện được gọi bối cảnh mặc định là yếu tố dom đã kích hoạt sự kiện đó. Vì vậy, bạn không thể gọi phương thức của đối tượng của bạn bằng cách sử dụng tham chiếu đó.

Có nhiều giải pháp cho vấn đề này, một giải pháp dễ dàng là để vượt qua một bối cảnh tùy chỉnh cho hàm callback sử dụng Function.bind() như đưa ra dưới đây và truy cập vào các yếu tố nhắm mục tiêu sử dụng Event.currentTarget trong callback như

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(); 
} 

sau đó

$('.remove').click(this.OnRemoveClick.bind(this)); 
-1

$('.remove').click(() => this.OnRemoveClick); phải là $('.remove').click(() => this.OnRemoveClick()); tức là gọi hàm.

Thông tin thêm về this: https://www.youtube.com/watch?v=tvocUcbCupA

+0

Tôi không chắc bạn đã dành thời gian để hiểu câu hỏi của tôi , điều này không hữu ích ở tất cả – NRKirby

+0

Câu trả lời được chấp nhận '$ ('. remove'). nhấp (this.OnRemoveClick.bind (this));' và những gì tôi đã nói '$ ('. remove').() => this.OnRemoveClick()); 'về cơ bản là tương đương. Đây là lý do tại sao tôi chỉ cho bạn để thu thập một sự hiểu biết tốt hơn về 'này' nếu không bạn sẽ gặp phải vấn đề này một lần nữa mà không hiểu những gì đang thực sự xảy ra – basarat

Các vấn đề liên quan