<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?
$('li').click(function () {
alert($(this).data('val'));
});
See DEMO.
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.
$('li').click(function() {
alert($(this).attr('data-val'));
});