Detect target with data attribute

by Matthew Day

HTML

<ul>
  <li data-fname="Ana">
    <p>Ana</p>
    <button>Click</button>
  </li>
  <li data-fname="Billy">
    <p>Billy</p>
    <button>Click</button>
  </li>
  <li data-fname="Carlos">
    <p>Carlos</p>
    <button>Click</button>
  </li>
</ul>

CSS

ul {
  list-style-type: none
}

p {
  display: inline-block;
  min-width: 60px;
}

JavaScript

$(document).on('click', 'ul li', (e) => {
	let target = e.currentTarget;
	console.log($(target).data("fname"));
})