Typescript unable to read object's ID

Question

I have the following event handler defined:

$('#current-tab').click(myCode.handleTabClick);

And in that function I have

handleTabClick: (): void => {
    const identifier: string = $(this).attr('id');
},

When I execute this in the browser, the event gets fired but I see identifier is "undefined". However, if I add a break-point and then copy $(this).attr('id') into the browser's console, I see that this resolves to "current-tab".

Why can't I capture this into my constant variable?

Can you create a minimal reproducible example? It is very hard to tell from the information you provided. — AhmerMH
– AhmerMH, Commented Dec 8, 2020 at 16:37
Handle click is an arrow function. Change it to a regular function. The “this” context is not bound to the function in an arrow function — Faraz
– Faraz, Commented Dec 8, 2020 at 16:38

DrGriff · Accepted Answer · 2020-12-09 08:24:53Z

1

Change:

handleTabClick: (): void => {
    const identifier: string = $(this).attr('id');

},

To:

handleTabClick: function(): void {
    const identifier: string = $(this).attr('id');
}

In a an arrow function this is not bound to the function

edited Dec 9, 2020 at 8:24

DrGriff

4,93410 gold badges53 silver badges107 bronze badges

answered Dec 8, 2020 at 16:42

Faraz

4433 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript unable to read object's ID

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related