JQuery Retrive data-attribute from on click function

Question

I have a div structure like this:

<div class='bar'>
    <div class='contents'>
        <div class='element' data-big='join'>JOIN ME</div>
        <div class='element' data-big='play'>PLAY ME</div>
        <div class='element' data-big='list'>GO TO LIST</div>
        <div class='element' data-big='chart'>GO TO TOP 10</div>
    </div>
</div>

How can I refer to their data attribute by onClick function?

I tried with

$(".bar .element").on('click', ()=> {
    alert($(this).data('big'));
});

But it always alert "undefined".

EDIT:

My assertion was bad from the beginning, I was using a lambda (or arrow) expression from the Typescript language. That makes the different meaning of the keyword "this".

the snippet:

$(".bar .element").on('click', function(){
    alert($(this).data('big'));
});

works as espected.

Answer 1

You do not have a .barra (as you had in your original JS -- $(".barra .element")) element in your HTML and you've not written the callback properly:

$(".bar .element").on('click', function() {
    alert($(this).data('big'));
});

    $(".bar .element").on('click', function() {
        alert($(this).data('big'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bar'>
    <div class='contents'>
        <div class='element' data-big='join'>JOIN ME</div>
        <div class='element' data-big='play'>PLAY ME</div>
        <div class='element' data-big='list'>GO TO LIST</div>
        <div class='element' data-big='chart'>GO TO TOP 10</div>
    </div>
</div>

Answer 2

you should change your function like below

$(".bar .element").on('click', function() {
    alert($(this).attr('data-big'));
});