how can $(this) not be the element that triggered the event in a jquery click handler?

Question

I have a simple click handler

$(\'#test\').click( ev => {
   var $test = $(this);
   console.log($test         


        

Answer 1

Arrow functions do have a "lexical this". That means that the value of this inside of your function is the same as outside of it. And since the value of this in the global scope is window you also get that value in your event handler.

You have to use a normal function like this if you want your code to work:

$('#test').click( function(){
 var $test = $(this);
 console.log($test.text());
})

You can't set the value of this of an arrow function in any way.

var f1 = () => this
var f2 = function(){return this}
f1.call("hello") // --> window
f2.call("hello") // --> "hello"

this is always lexical for arrow functions

function foo(){
  return () => this
}

foo.call(true).call(false) // --> true

For more information on arrow functions have a look at the mdn reference.