CODEWITHSUNDEEP
javascriptjquery
Omu
Omu

Reputation: 71188

get value of an attribute of the clicked element

<ul id='langs'>
   <li data-val='en'>english</li>
   <li data-val='fr'>francais</li>
   <li data-val='it'>italiano</li>
</ul>

when the user clicks on any of these <li> I want to alert() it's data-val attribute value

anybody knows how?

Upvotes: 33

Views: 62873

Answers (3)

rsp
rsp

Reputation: 111278

Original answer - 2011

$('li').click(function () {
    alert($(this).data('val'));
});

See DEMO.

Update - 2017

Keep in mind that if you want to use the ES6 arrow function syntax, you cannot use this and you need to use e.currentTarget instead, where e is the event object passed as the first parameter to the event handler:

$('li').click(e => alert($(e.currentTarget).data('val')));

See DEMO.

Upvotes: 44

sled
sled

Reputation: 14625

This should do the job:

$(document).ready(function() {

  $('#langs li').click(function() {
    alert($(this).attr('data-val'));
  });
});

Have a look at the Docs

Upvotes: 21

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

$('li').click(function() {
    alert($(this).attr('data-val'));
});

Upvotes: 5

Related Questions