Source Code:
(back to article)
Submit
Result:
Report an issue
<!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).data("id"); alert("The data-id of clicked item is: " + dataId); }); }); </script> </body> </html>