The event.target.id property returns an empty string in my list item event click handler. Why is that?

$("ol").on("click", "li", function(event) {
 let id = event.target.id; // returns ""
});

I know I can get the id of the list item by using $(this).attr("id"), but I am just wondering why it is that the piece of code above returns an empty string for the id?

The event.target is most likely an <li> since I haven't gotten any other element in the DOM tree between the <ol> and the <li> and a bit of reflection says this:

The event.target.id property returns an empty string in my list item event click handler. Why is that?

$("ol").on("click", "li", function(event) {
 let id = event.target.id; // returns ""
});

I know I can get the id of the list item by using $(this).attr("id"), but I am just wondering why it is that the piece of code above returns an empty string for the id?

The event.target is most likely an <li> since I haven't gotten any other element in the DOM tree between the <ol> and the <li> and a bit of reflection says this:

• javascript
• jquery

Share Improve this question Follow edited Apr 23, 2019 at 13:06 Water Cooler v2 asked Apr 23, 2019 at 13:02 Water Cooler v2Water Cooler v2 33.9k6363 gold badges183183 silver badges365365 bronze badges 4

• Because event does not work like that. You can check developer.mozilla/en-US/docs/Web/API/Event to see what is available to you. – Marco Commented Apr 23, 2019 at 13:04
• Try to console.log what's in event.target and let us know if you are expecting that element there. It would be helpful if you can show us what you have got in your HTML by making a minimal reproducible example. – Praveen Kumar Purushothaman Commented Apr 23, 2019 at 13:04
• 1 Always console, That's the best solution to figure out the problem your self – Thanveer Shah Commented Apr 23, 2019 at 13:05
• It would be a lot clearer if you'd post an extract from the HTML. However note that in the console output the id is the empty string. Why do you expect the element to have an id value? They don't get one automatically. – Pointy Commented Apr 23, 2019 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need to use event.currentTarget

In the below example, if you click on abc, the both the logs paint 2, however, if you click on def, first logs paint '' and second logs paint 2.

$("ol").on("click", "li", function(event) {
  console.log(event.target.id);
  console.log(event.currentTarget.id);
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ol>
    <li id="2">
      abc
      <span>def</span>
    </li>
  </ol>

</div>

The event target is not necessarily the <li> element. Events bubble up the DOM tree.

Thus in:

<ol>
  <li>
    <span>Hello World!</span>
</ol>

clicking on the text would trigger the event handler but the target would be the <span>, not the <li>.

You're using jQuery, so just refer to this. The library arranges for this to be a reference to the element relevant to the way the handler was set up.

$(function() {
  $("ol").on("click", "li", function(event) {
    console.log("event target: ", event.target);
    console.log("this.id: ", this.id);
  });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
  <li id="the-li-element">
    <span id="the-span-element">Hello World!</span>
</ol>

Note also that, ultimately, you'll only get a value for the id attribute of an element if it actually has an id. The browser doesn't make up id attributes for everything in the DOM.