JQuery: получить дочерний элемент под курсором родительского элемента, по которому щелкнули

Question

Скажем, у нас есть базовый список, подобный этому:

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>

$('#list').on('click', function() {
  // how to get the li element that was clicked within the ul element?
});

Answer 1

Это очень просто:

$('#list').on('click','li', function() {
  // how to get the li element that was clicked within the ul element?
});

Добавив селектор в качестве дополнительного аргумента в метод .on () , вы получите доступ к элементу, который инициирует событие.

Answer 2

Не знаю, почему вы не хотите назначать событие click непосредственно li, но я предполагаю, что вы захотите что-то сделать с ul позже в своем коде, так как насчет того, чтобы сделать это наоборот?

$('#list li').on('click', function() {
   // if you need to get parent, do
   var parent = $(this).parent();
});