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

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>

Use $(this).data() instead of this.data().

var my_links = $('#list').find('a');
    my_links.on('click', function(){
        console.log($(this).data());
    });

Find more info on jQuery $(this) here: jQuery: What's the difference between '$(this)' and 'this'?