Question

$("#showKey").each(
    $(this).click(function(){
        alert($(this).attr("value"));
    })
);

And

<a id="showKey" href="#" value="{{ customer.key }}">
   <span class="icons icon-key"></span>
   Show key
</a>

The alert gives and undefined output, just ‘undefined’. I have a list of customers and a click on #showKey should reveal the key for the clicked customer.

Whats wrong with my code?

Answer 1

You cannot have multiple elements with the same ID – use a class instead. Additionally, you don’t need the call to .each — use a class selector instead:

$(".showKey").click(function(){
     alert($(this).data("key"));
);

<a class="showKey" href="#" data-key="{{ customer.key }}">Show key</a>