$(this) returning undefined

Question

Why is $(this) returning undefined instead of the clicked element?

I've replaced $(this) with event.target and it works fine but would like to understand the issue with $(this), thank you!

$('.nav-search-options').on('click', (event) => {

  console.log($(this))

})

Fat arrow function (`=>`) does not bind `this`, that's why you must use `event.target` or use normal function — Justinas, Aug 27 '21 at 09:32
is this element .nav-search-options dynamically added by JS ? — Jayvirsinh Vaghela, Aug 27 '21 at 09:34
@JayvirsinhVaghela "*I've replaced $(this) with event.target and **it works fine**"* - so clearly not a delegated event issue. — freedomn-m, Aug 27 '21 at 09:38
Brilliant thanks, just need to use a standard function, it is interesting how an arrow function doesn't bind this — JamesJavascript, Aug 27 '21 at 09:38

score 2 · Accepted Answer · answered Aug 27 '21 at 09:39

@JamesJavascript. It is partially right what Justinas said in the comment about arrow function - although there are more things to add.

Arrow functions do not have their own "this", instead they bind one from their parent scope.

To see what I mean, try this and see that it returns you the window object:

const myFunction = () => {
  console.log(this);
};

// call it
myFunction();

1 Answers1