javascript - jQuery function(event) event.target.id is blank when clicking linked text

Question

I have a side menu that when clicked slides out to reveal a content panel. Based on the menu item clicked I obviously need different stuff to populate in the panel.

I wrote a function to operate the menu/panel and it partially works. However, I am trying to determine what to load based on event.target.id (as the function takes event) but it only has a value when I click very close to the edges of the linked square. When I click near the actual text which are h1 and h6 and have no id's it doesn't work.

Live demo (click near the edges of the 'Styles' square and then in the middle): http://jsfiddle.net/mANuD/

<div id="application-frame">
  <div class="panel"></div>
  <ul id="slide-out-menu">
    <li>
      <a href="#" class="item" id="styles-menu">
        <h1>S</h1>
        <h6>Styles</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="designers-menu">
        <h1>D</h1>
        <h6>Designers</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="code-menu">
        <h1>C</h1>
        <h6>Code</h6>
      </a>
    </li>
    <li>
      <a href="#" class="item" id="help-menu">
        <h1>?</h1>
        <h6>Help</h6>
      </a>
    </li>
  </ul>
</div>

How can I fix/improve this so that it doesn't matter where in the linked area I click?

Answer 1

Change event.target.id to event.currentTarget.id or this.id.

The event.target is always the deepest element clicked, while event.currentTarget or this will point to the element to which the handler is bound, or to the element that the delegate selector matched.