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.

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.

• javascript
• jquery
• html
• typescript
• custom-data-attribute

Share Improve this question Follow edited Nov 10, 2014 at 14:20 A. Wolff 74.4k99 gold badges9797 silver badges157157 bronze badges asked Nov 10, 2014 at 13:57 PlasticPlastic 10.3k66 gold badges3535 silver badges5555 bronze badges 11

• .on('click', ()=> ??? What kind of syntax is it? – A. Wolff Commented Nov 10, 2014 at 14:01
• 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 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 Commented Nov 10, 2014 at 14:04
• 2 @A.Wolff It's an ES6 construct – James Thorpe Commented Nov 10, 2014 at 14:05
• 1 @A.Wolff It will be when enough browsers support it :) – James Thorpe Commented Nov 10, 2014 at 14:09

 |  Show 6 more ments

5 Answers 5

Sorted by: Reset to default 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./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>

you should change your function like below

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

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 ().

Here is the working solution:

jQuery:

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

DEMO

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'));
});