console log returns undefined

Question

I'm trying to build a multi-level mobile menu. I want to use custom attribute (data-key). The problem is, I can't get the attribute value. I tried to log it and it returns undefined.

$(".js_menu-link").on("click", (e) => {
  e.preventDefault();
  console.log($(this).attr("data-key"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

you can try like this https://jsfiddle.net/a4mtzf1n/2/ and you don't need to have can file — benzo, Jul 24 '20 at 21:28

s.kuznetsov · Accepted Answer · 2020-07-24T21:04:05.123

To get the attribute values in your case, you need to use the each() method. Here's a simple example.

$('.js_menu-link').each(function() {
  console.log($(this).attr("data-key"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

In this example, you can get the value of an attribute one by one. And on click.

$('.js_menu-link').click(function(event) { 
  event.preventDefault() 
  console.log($(this).attr("data-key")); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

that is what i'm trying to do. to get data-key of the clicked link but it returns undefined. — Ismayil Mirzayev, Jul 24 '20 at 21:53
I checked my code again. And the code works. I am getting the attribute values in the console. — s.kuznetsov, Jul 24 '20 at 21:54
i tested it outside the project and it works as expected but in the project it fails for some reason. thanks anyways — Ismayil Mirzayev, Jul 24 '20 at 22:08
In this case, you need to view the project globally. If you got the result you wanted, then please tick the question. — s.kuznetsov, Jul 24 '20 at 22:15

console log returns undefined

1 Answers1