Получить значение атрибута элемента с щелчком

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

когда пользователь нажимает на любой из этих <li>, я хочу alert() присвоить значение атрибута data-val

Кто-нибудь знает, как?

Ответ 1

Оригинальный ответ - 2011

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

См. DEMO.

Обновление - 2017

Имейте в виду, что если вы хотите использовать синтаксис arrow function , вы не можете использовать this, и вам нужно использовать e.currentTarget, где e - это объект события, переданный в качестве первого параметра обработчику события:

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

См. DEMO.

Ответ 2

Это должно выполнить задание:

$(document).ready(function() {

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

Посмотрите Документы

Ответ 3

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