Jquery (event) event.target.id function is empty when linked text is clicked

I have a side menu that opens when clicked to open the content pane. Based on the clicked menu item, I obviously need different things to fill in on the panel.

I wrote a function to work with the menu / panel, and it partially works. However, I am trying to determine what to load based on event.target.id(as the function accepts event), but it only matters when you click very close to the edges of the connected square. When I click near the actual text h1and h6and doesn’t have it id, it does not work.

Live demo (click on 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>

/ , , ?

+5
2

event.target.id event.currentTarget.id this.id.

event.target , event.currentTarget this , , , .

+12

, , event.target , () .

:

  • this.id, id , (). , . Fiddle

  • , , - closest, , , , , , .. , , $(this).closest(".item").attr("id") $(event.target).closest(".item").attr("id") ( item). Fiddle , , # 1 - , .

+3

All Articles