Get Id from clickable list

Question

I'm trying to create a list in HTML where each item in the list can be clicked.But I need to know the ID of the item that was clicked.

I have been trying to have a div surround the list item and have an onClick and a ID tag associated. Then get the ID tag from the synthetic event.

But my list items are complex so they have sub DOM elements. Meaning if I click the <p> it will not return the ID associated with the div tag.

I'm not sure what the best would be to do this? strong text

use jQuery and in onclick function you can get clicked element reference by `$(this)`. — Aagam Jain, Sep 21 '18 at 12:05
if you put some code it will help us to know how exactly is your issue — Yves Kipondo, Sep 21 '18 at 12:06
register an onclick eventhandler on some child element of your list item, in the eventhandler you have a handle on the dom element that fired the onclick event and with that you can query for it's parent list item element and get it's id... — Tommy Brettschneider, Sep 21 '18 at 12:08
Possible duplicate of [JavaScript - onClick to get the ID of the clicked button](https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — A. Meshu, Sep 21 '18 at 12:19
how about this [Click on option event](https://stackoverflow.com/questions/4670405/click-on-option-event) ? — Ahmed Helal Ahmed, Sep 21 '18 at 12:22

score 0 · Answer 1 · answered Sep 21 '18 at 12:06

0

Here are some solutions you can reference:

If using jQuery, try this api: ele.closest("div") to get the outer div tag
Study the javascript event popup and catch, after that you will get the answer

answered Sep 21 '18 at 12:06

Jerry

170
8

score 0 · Answer 2 · answered Sep 21 '18 at 12:18

0

This question got very good answer here: JavaScript - onClick to get the ID of the clicked button

Orginally it demonstrates button click but you can use it for your li element (or any element) that you wish.

Good luck!

answered Sep 21 '18 at 12:18

A. Meshu

4,053
2
20
34

Swetoslav · Answer 3 · 2018-09-21T12:25:06.700

let li = $("li");
li.on("click", getId);

function getId(e) {
   e.stopPropagation();
   let id = $(this).attr("id");
   console.log(id + " was clicked!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="element_1">1. Click me</li>
    <li id="element_2">2. Click me
        <ul>
            <li id="element_2.1">2.1. Click me</li>
            <li id="element_2.2">2.2. Click me</li>
            <li id="element_2.3">2.3. Click me</li>
        </ul>
    </li>
    <li id="element_3">3. Click me</li>
    <li id="element_4">4. Click me</li>
</ul>

score 0 · Answer 4 · answered Sep 21 '18 at 12:33

I hope this helps and if i understood you question correctly in your HTML you can try this

<ul>
  <li><a href="#" id="1" class="test">Coffee</a></li>
  <li><a href="#" id="2" class="test">Tea</a></li>
  <li><a href="#" id="3" class="test">Milk</a></li>
</ul>

and in jquery try this

 $(document).on("click", ".test", function (e) {
            e.preventDefault();
            alert($(this).attr("id"));
        });

Get Id from clickable list

4 Answers4