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.

Can you confirm what version of jQuery? "As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object" — James Thorpe
– James Thorpe, Commented Nov 10, 2014 at 14:01
@Wolf .on('click', ()=> ??? What kind of syntax is it? This is a Typescript syntax equivalent to .on('click', funtion(){}); — Plastic
– Plastic, Commented Nov 10, 2014 at 14:04

PeterKA · Accepted Answer · 2014-11-10 17:15:34Z

3

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>

edited Nov 10, 2014 at 17:15

answered Nov 10, 2014 at 14:01

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Plastic Over a year ago

I know that my original snippet had a typo for the class selector but the problem wasn't there. I had a wrong syntax on my callback function, i was using a typescript lambda syntax instead of the usual javascript syntax. Anyway, I mark your as the right answer because you used JQuery "data" method.

murli2308 · Accepted Answer · 2014-11-10 14:01:26Z

3

you should change your function like below

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

answered Nov 10, 2014 at 14:01

murli2308

3,0224 gold badges31 silver badges47 bronze badges

Comments

Fenton · Accepted Answer · 2014-11-10 15:05:53Z

3

In TypeScript, the arrow function expression (() =>) is used to preserve the lexical scope. This means that when you use this inside of an arrow function, it will refer to the same scope as using this outside of the function.

In your case, you want the function to run with the scope of the onclick event, not the lexical scope, so you should avoid using the arrow function and instead use function ().

answered Nov 10, 2014 at 15:05

Fenton

253k74 gold badges404 silver badges414 bronze badges

Comments

Ilya · Accepted Answer · 2014-11-10 14:52:27Z

1

Here is the working solution:

jQuery:

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

DEMO

edited Nov 10, 2014 at 14:52

Ilya

29.9k19 gold badges119 silver badges161 bronze badges

answered Nov 10, 2014 at 14:33

sasi

2091 silver badge7 bronze badges

Comments

lem2802 · Accepted Answer · 2014-11-10 14:02:21Z

0

you can use "id" to do it:

<div id='div1' class='element' data-big='join'>JOIN ME</div>

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

answered Nov 10, 2014 at 14:02

lem2802

1,1627 silver badges18 bronze badges

1 Comment

Plastic Over a year ago

I don't want to add ID on my element

Collectives™ on Stack Overflow

JQuery Retrive data-attribute from on click function

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related