Как выполнить такое делегирование события?

Question

[Andrey Dyrkov]

Мне необходимо делегировать событие клика по плитке.
Вот я накидал типовой html

<div class="tiles">
    <ul class="tile-group">
      <li class="tile" data-tile="1">
        <h3>Tile</h3>
        <p>Description</p>
      </li>
      <li class="tile" data-tile="2">
         <h3>Tile</h3>
         <p>Description</p>
      </li>
    </ul>
    <ul class="tile-group">
      <li class="tile" data-tile="3">
         <h3>Tile</h3>
         <p>Description</p>
      </li>
    </ul>
  </div>

Мы делегируем всё в .tiles. Необходимо чтобы при нажатии на .tile и все его дочерние элименты я мог получить data-tile. Тоесть при нажатии на что угодно если это являеться .tile или его родитель .tile я должен получить его data-tile. Сделать это можно бонально, меня интересует самый крутой способ, элигантный и быстрый, чтобы при каждом нажатии не было огромных действий типо оборачивания в jquery. Если произведён клик не по тайлу то для проверки нужно использовать минимум действий. У меня получилось но больно громоздко. Если нужно будет могу скинуть)

Answer 1

[Алексей Уколов]

$('.tiles').on(
  'click',
  '.tile',
  function () {
    var tileIndex = $(this).data('tile');
  }
);