Register single click on list item child elements
I have the following HTML structure:
<li class="is_tab" id="geometry_tab"> <a data-toggle="collapse" href="#geometry_tab_collapse"> <i class="pe-7s-plugin"></i> <p>Geometry <b class="caret"></b> </p> </a> <div class="collapse" id="geometry_tab_collapse"> <ul class="nav"> <li class="is_tab" id="pipe_geometry_tab"><a href="#">Pipe Geometry</a></li> </ul> </div> </li>
Using jQuery, my objective is to retrieve the <li> id on click, irrespective of whether the user clicks li.is_tab, li.is_tab > a, li.is_tab > a > p, or li.is_tab > a > i. Moreover, I would like the same event handler to be capable of distinguishing between clicks on #pipe_geometry_tab and #geometry_tab, i.e., simply returning a single, correct id when one or the other is clicked.
My question is this:
Given the following snippet,
is there a <selector> that will register a single click on li.is_tab regardless of whether it or its a, i, or p children is clicked?
If not, I would appreciate any recommendations on how to go about this.
PS I've tried quite a few things, but rather than bloat this post with them, I'm hoping someone more experienced feels this has an obvious solution.
^^ that should work fine and anything that is clicked on the li will be handled.
If you want the li that was clicked you can look at e.currentTarget if you want to see the actual element that was clicked you can use e.target
So if you want the id of the li that was clicked you can use e.currentTarget.id