Ao executar o seguinte código:
$("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>
O valor do botão é retornado normalmente. Mas em:
$("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>
Usando arrow function no evento acusa o erro no jQuery:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
Vejam que estou a usar a última versão 3.3.1
do jQuery.
Alguém saberia dizer por quê a arrow function não funciona em casos de eventos do jQuery visto que o ES6 não é algo tão novo assim (também chamado de ECMAScript 2015) lançado em junho de 2015 (quase 3 anos!)?
event.currentTarget
que é o alvo do evento. Veja esta pergunta no SOen