Instead of li, it's child is clicked

Question

I have a list here:

<ul id="orderlist">
    <li id="2">
      <span class="pull-right value">Ready</span>
      <img src="" class="img-responsive"> Filet Mignon 
      <small>2 servings</small>
      <small>Note: No lettuce </small>
    </li>
    <li id="3">
      <span class="pull-right value">In Progress</span>
       <img src=""  class="img-responsive"> Tarte Tatin
      <small>2 servings</small>
    </li>
 </ul>

And I have a JavaScript for clicking each li:

$("body").on("click", "#orderedlist li", function(e) {
    $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });
    oiID = $(e.target).attr('id');
    return false;
});

It works, but if I click the <img> or other elements inside the li, it returns undefined for oiID because it gets the child element not the li. How can I fix this that even if I click in the elements inside the parent, li should be the one recognized.

Answer 1

You are using JQuery, so use $(this):

oiID = $(this).attr('id');

// OR

oiID = $(e.target).attr('id');
if(oiID == '')
  oiID = $(e.target).parent().attr('id');

Answer 2

Instead of $(e.target) use $(this).

oiID = $(this).attr('id');