Jquery Function(event) Event.target.id Is Blank When Clicking Linked Text

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 funct

Solution 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.

Solution 2:

It sounds like there's a border or padding on some of the descendant elements, and so event.target is a descendant of the element on which the handler is (effectively) hooked up.

Two options:

1. Use this.id to get the id of the element the handler was (effectively) bound to. This usually does what you want. Updated Fiddle

2. I don't think you need it in this situation, but the other handy tool in the toolkit for this is closest, which finds the first element matching a selector by looking at the element you give it, then its parent, then its parent, etc. So for instance, $(this).closest(".item").attr("id") or $(event.target).closest(".item").attr("id") (since the items you want have class item). Updated Fiddle But again, I believe #1 is what you want in this case.