Events of jQuery Vs. Arrow functions?

Asked

Viewed 442 times

0

When executing the following code:

$("button").on("click", function(){
   console.log("Meu valor é: " + $(this).val());   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

The value of the button is returned normally. But in:

$("button").on("click", ()=>{
   console.log("Meu valor é " +$(this).val());   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

Using Arrow Function in event accuses error in jQuery:

Uncaught Typeerror: Cannot read Property 'toLowerCase' of Undefined

You see I’m using the latest version 3.3.1 jQuery.

Would anyone know why the Arrow Function does not work in cases of jQuery events since ES6 is not something so new (also called Ecmascript 2015) released in June 2015 (almost 3 years!)?

  • Directly there is no way. But you can make use of the event.currentTarget which is the target of the event. See this question on Soen

1 answer

3


To Arrow Function works with jQuery, what doesn’t work is the $(this). This is not implementing by jQuery because is not possible.

Arrow functions don’t have their Own this Binding so it’s technically Impossible to use the this Binding jQuery provides with an Arrow Function.

Free translation:

Arrow functions are not properly linked to this, then it is technically impossible to use the link to this provided by jQuery in a Arrow Function.

This is described in the Ecmascript2015 specification:

An Arrowfunction does not define local bindings for Arguments, super, this, or new target.. Any Ference to Arguments, super, this, or new target. Within an Arrowfunction must resolve to a Binding in a lexically enclosing Environment. Typically this will be the Function Environment of an immediately enclosing Function.

Free translation:

One Arrow Function does not define a local link to Arguments, super, this or new target.. Any reference to Arguments, super, this or new target. in a Arrow Function should be linked to the lexical scope to which it belongs. Typically, the chosen scope will be that of the function immediately above.

To get around the problem, you can take the event source object through the function parameter, so you can access its attributes:

$("button").on("click", event =>{
    console.log("Meu valor é " +event.target.getAttribute('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

  • 1

    Could translate the text (adapt with your words would be ideal)

  • @Guilhermenascimento Feito! It was a little difficult to define which words should have been translated and which should not, since many of them are "universal jargon" in the area. If I have translated any word that I should not, or failed to translate, let me know that I will make the correction. Or even edit the question and apply it. If there is an error, do the same.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.