jQuery - difference between these function calls

Question

I have a JS-class with some events

jQuery(document).on('click', '.btn-details', (e) => {

but I can't access the data-attr tthe .btn-details has.

when I do a

jQuery(document).on('click', '.btn-details', function() {

I can access the data-attr of the btn-details-element, but not the this.myvar-class-variable.

what is the problem here? what does this (e) => exactly mean?

Answer 1

They both are function calls. The difference is that in first call, you use an arrow function with the event parameter (e).

Arrow function

(param1, param2, …, paramN) => { statements }

As stated in the documentation

An arrow function does not create it's own this context, rather it captures the this value of the enclosing context

So, I assume you are trying to get the data attribute using the this keyword

$(this).attr('data-test')

but, in arrow function, the this refers to the object of the enclosing context, not to the specific object.

---

The second one is a classic function call and this refers to the clicked element, so here you can successfully get the 'data-test' attribute.

---

EXAMPLE

Check this live example

In both buttons, the this object is writen in the console.log. Using the normal function the console outputs teh clicked element (the button) but, using the arrow function the console outputs the window object.

Answer 2

Warning While they are both ways of defining a function, they are not the same. Read more details on MDN Documentation.

Arrow functions automatically bind this to the current context.
If you are using jQuery this is a problem if you are trying to use this to refer to the current target.

$('div').click(function() {
  console.log(this) // the click target as expected
})

$('div').click(() => {
  console.log(this) // not the click target because jQuery can't bind it
})

If you want to use an arrow function, you can accept the event as an argument to your callback:

$('div').click((e) => {
  console.log(e.currentTarget) // click target as expected
  console.log(this) // enclosing context - could be useful
}

This can actually be handy if you want to keep track of the enclosing context from within the callback.

Answer 3

e contains the click event properties. it's commonly used with an global-like (document scoped) event like this:

jQuery(document).on('click', '.btn-details', (e) => {
   var btnDetails = e.target;
   var attr = btnDetails.data("attr");
}

or

jQuery(document).on('click', '.btn-details', function(e) {
   var btnDetails = e.target;
   var attr = btnDetails.data("attr");
}

the original event receiver is the document element, because you had bound the listener method to it, but you can get the triggering element by querying e.target inside it.

Answer 4

Using an arrow ()=> function binds the "this" keyword from the original caller's "this" to the one inside the function scope.

Answer 5

The safest way to access the related elements (I mean without messing with this context) is to use the appropriate event properties.

• e.target refers to the actual event target
• e.currentTarget refers to the delegated event target (same as this)

So in your case you can always access the .btn-details element with e.currentTarget.