Error in event handler: "this.data() is not a function"

Question

I have an HTML list of links with data-… attributes on each one:

<ul id="list">
    <li><a data-info="link1"> **** </a></li>
    <li><a data-info="link2">****</a></li>
    <li><a data-info="link3">**** </a></li>
    <li><a data-info="link4">****</a> </li>
</ul>

I need to receive the data-info value of a link whenever it is clicked. So I thought something like this:

var my_links = $('#list').find('a');

my_links.on('click', function(){
     console.log(this.data(info));
});

But then I get:

Uncaught TypeError: this.data is not a function

If I just do:

var my_links = $('#list').find('a');

my_links.on('click', function(){
  console.log(this);
});

I get the complete HTML code of each link, for example:

<a data-info="link1"> **** </a>

Why are both things happening, and how can I fix it?

Answer 1

data() is a jQuery method, not a method of native DOM objects.

this will be the <a> element that was clicked — a native DOM object (HTMLAnchorElement). Give it a jQuery wrapper to call jQuery methods:

my_links.on('click', function() {
  console.log( $(this).data('info') );
});

Alternatively, you can skip the jQuery wrapper and access the data attribute directly:

my_links.on('click', function() {
  console.log( this.dataset.info );
});

const my_links = $('#list a');

my_links.on('click', function() {
  console.log( 'jQuery: ' + $(this).data('info') );
  console.log( 'Vanilla JS: ' + this.dataset.info );
});

a {
  cursor: pointer;
  border-bottom: 1px solid blue;
}

li {
  line-height: 2em;
}
  

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

<ul id="list">
    <li><a data-info="link1">link 1</a></li>
    <li><a data-info="link2">link 2</a></li>
    <li><a data-info="link3">link 3</a></li>
    <li><a data-info="link4">link 4</a> </li>
</ul>