0

I was just trying to get data-id of an html element by refering the previously solved issue in stackoverflow.I am exactly trying the same but getting undefined.Why is it so?

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a data-id="123" class="a">link</a>
 <script type="text/javascript">
  $(document).ready(() => {
   $('.a').on('click',() => {
    console.log($(this).attr("data-id"));
   })
   
  })
 </script>
</body>
</html>
mariappan .gameo
  • 171
  • 1
  • 1
  • 15
  • Use this answer: https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute It related to your jquery version – Eitanmg Jun 17 '18 at 19:44

3 Answers3

1

You are using ES6 by using () => Arrow Function thats why not working your code. It's the specific functionality you're asking for by using () => {} instead of function () { }:

<script type="text/javascript">
  $(document).ready(() => {
    $('.a').on('click', function() {
      console.log($(this).data('id'));
    });

  })
</script>

The way to solve this particular problem is not to use this to gain access to the clicked element, but instead use event.currentTarget:

<script type="text/javascript">
  $(document).ready(() => {
    $('.a').on('click', (e) => {
      console.log($(e.currentTarget).data('id'));
    });
  })
</script>

I suggest you to read this documentation Arrow_functions

Imanali Mamadiev
  • 2,604
  • 2
  • 15
  • 23
0

Try this Your created function was wrong. 

$('a').click(function(){
    console.log($(this).data('id'));
})

OR

$('a').on('click',function(){
    console.log($(this).attr('data-id'));
})
jvk
  • 2,133
  • 3
  • 19
  • 28
  • Yah,it's working but why is it so.Both are same right? – mariappan .gameo Jun 17 '18 at 19:43
  • attr is different from data – jvk Jun 17 '18 at 19:44
  • You cannot use an arrow function here because the meaning of 'this' is different: https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch – Andrew Chart Jun 17 '18 at 19:46
  • Sorry @AndrewChart, i don't get you, what you trying to say? – jvk Jun 17 '18 at 19:51
  • Sorry, I wasn't clear. Your answer is fine, but the original poster used an arrow function as the callback for on('click'). The reason the OP's version did not work is because, when you use an arrow function, `this` is NOT interpreted in the same way. It refers to the lexical environment in which the function was created (the link I posted explains this). When you use a traditional function declaration, `this` refers to the element upon which the event occurred - which is what is required for the OP's purposes. – Andrew Chart Jun 17 '18 at 19:54
  • Oh ok ,I can understand it now. – mariappan .gameo Jun 17 '18 at 19:58
-2

Try this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a data-id="123" class="a">link</a>
    <script type="text/javascript">
        $(document).ready(() => {
            $('.a').on('click',function() {
                console.log($(this).data("id"));
            })

        })
    </script>
</body>
</html>
Onfire
  • 336
  • 3
  • 13