Below is a list I have:
<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>
A JavaScript function has been created 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;
});
Although the function works, when clicking on elements like <img> within the li, it returns undefined for oiID as it selects the child element rather than the parent li. How can this be resolved so that even if elements within the parent are clicked on, the li is recognized.