Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
div p {
display: inline-block;
margin: 10px;
list-style: none;
opacity: 0.8;
}
div p:hover {
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div class="divClass">
<p data-id="id1">
<a href="#"> Link1</a>
</p>
<p data-id="id2">
<a href="#"> Link2</a>
</p>
<p data-id="id3">
<a href="#"> Link3</a>
</p>
</div>
<script>
$(document).ready(function() {
$(".divClass p").on("click", function() {
let dataId = $(this).attr("data-id");
alert("The data-id of clicked item is: " + dataId);
});
});