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

Question

I have a simple click handler

<h1 id="test">

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

but it does not work, $(this) is not the emitter element. If I inspect this I see a "window" (?) (??) (??!)

also, if I change my code to

var $test = $(ev.toElement);

it works perfectly.

how can this be? what is in my code that prevents jquery to correctly pass the element in this ?

In this fiddle I just made up, it works: https://jsfiddle.net/x1pf3vuo/ — Angelos Chalaris, Jun 06 '16 at 11:11
[What does “this” refer to in arrow functions in ES6?](http://stackoverflow.com/questions/28371982/what-does-this-refer-to-in-arrow-functions-in-es6) — JJJ, Jun 06 '16 at 11:12
@chalarangelo No it doesn't. It shows the entire page's text (equivalent to `$(document).text()`), not the clicked element's text. — JJJ, Jun 06 '16 at 11:14
@Juhana, you are right, I just hadn't put any more text, so I thought it had something to do with the printing on the console. — Angelos Chalaris, Jun 06 '16 at 11:38

score 5 · Accepted Answer · answered Jun 06 '16 at 11:10

5

Arrow functions do not bind this, arguments etc. MDN.

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target).

answered Jun 06 '16 at 11:10

Yury Tarabanko

44,270
9
84
98

OMG ! that's it !! – PA. Jun 06 '16 at 11:19

Till Arnold · Answer 2 · 2016-06-06T11:22:15.117

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.

score 0 · Answer 3 · answered Jun 06 '16 at 11:20

Yury Tarabanko has already answered your question: Arrow functions do not bind this. This can come in handy if you're writing something like this:

<!-- HTML -->

<button>Click me to say hello!</button>

// JS:

class Foo{
  constructor( $button ){
    this.$button = $button;

    $button.click(() => {
      this.sayHello();
    });
  }

  sayHello() {
    alert('Hi');
  }
}

new Foo( $('button') );

Check out this fiddle: https://jsfiddle.net/bhkkLfty/

Play with this code for a while. Just change () => {} into function() {} and console.log this.

Edit: For more information, check out one of the following articles:

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

3 Answers3

Linked

Related