Using JQuery event.target to work with children

Question

My question refers specifically to http://api.jquery.com/event.target/#example-1

If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?

HTML:

<ul>
    <li><b>This doesn't work,</b> this does
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>

JavaScript:

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children("ul").toggle();
  }
}
$("ul").click(handler).find("ul").hide();

Answer 1

To keep using your current form, I'd suggest using closest():

function handler(event) {
    $(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();

JS Fiddle demo.

Though for my own use I'd prefer:

$('li').on('click', function(e){
    e.stopPropagation();
    $(this).find('ul').toggle();
});

JS Fiddle demo.

References:

• closest().
• on().