Как лучше повесить обработчик на элемент?

Question

[TheInsable]

Есть навигация, и элементы этой навигации (ссылки) грузятся через API с сервера, пример того, как это реализовано:

for (var i =  0; i < links.length; i++) {
   var li = document.createElement('li');
   li.innerHTML = links[i].name;
   $('.nav__content').append(li);
}

Создается элемент li и кладётся в ul с классом nav__content, но на эти li нужно повесить обработчик, для того, чтобы некоторые li можно было разворачивать, так как у некоторых ссылок будут подкатегории.
Как это лучше сделать? Пока что идея только одна: добавить к этим li-элементам класс и в js ловить их. Но я не думаю, что это лучшее решение.

Answer 1

[Negwereth]

Тут лучше повесить обработчик на родительский ul.
https://davidwalsh.name/event-delegate

Comments

[Алексей Струков]

У чела по ссылке слишком примитивная реализация.
Она не учитывает момент, когда внутри "li > a" лежит span или другой инлайн тег, или li имеет паддинг / бордер. При делегировании недостаточно отлавливать e.target. Там надо проверять в каком li находится нажатый элемент или является ли сам li этим элементом. Короче этот способ лучше использовать в самом крайнем случае и с осторожностью, когда кликабельных элементов очень много и они предварительно структурированы

[Negwereth]

Алексей Струков: вешать дико на всё обработчики, как у второго ответившего, тоже не вариант.

В статье описан сам принцип, и этот принцип тут подходит отлично. А конкретную реализацию всегда можно немного довести напильником.

Answer 2

[Владимир]

На jQuery это выглядит приерно так:

$(".nav__content").on( "click", "li", function(){
  // ваш обработчик клика по любому li
  // если какой-то li должен обрабатываться специфическим образом, 
  // задайте ему класс и работайте с этим классом
});