funzione di jQuery (evento) event.target.id è vuota quando si fa clic legata testo

Question

Ho un menu laterale che se cliccato scivoli fuori per rivelare un pannello di contenuti. In base alla voce di menu cliccata, ovviamente ho bisogno di cose diverse da popolare nel pannello.

ho scritto una funzione per utilizzare il menu/del pannello e funziona parzialmente. Tuttavia, sto cercando di determinare cosa caricare in base a event.target.id (poiché la funzione impiega event) ma ha solo un valore quando faccio clic molto vicino ai bordi del quadrato collegato. Quando clicco vicino al testo vero e proprio, che sono h1 e h6 e non hanno id 's non funziona.

Demo online (clicca vicino ai bordi della piazza 'Stili' e poi al centro): 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> 

Come posso risolvere il problema/migliorare questo in modo che non importa in quale parte del collegato area clicco?

Answer 1

Change event.target.id-event.currentTarget.id o this.id.

Il event.target è sempre l'elemento più profondo cliccato, mentre event.currentTarget o this punterà all'elemento a cui il gestore è legato, o all'elemento che il selettore delegato abbinato.

Answer 2

Sembra che ci sia un bordo o una spaziatura su alcuni elementi discendenti, e quindi event.target è un discendente dell'elemento su cui il gestore è (effettivamente) collegato.

due opzioni:

1. Usa this.id per ottenere il id dell'elemento gestore era (efficace) legato a. Questo di solito fa quello che vuoi. Updated Fiddle

2. Non credo che ne avete bisogno in questa situazione, ma l'altro strumento utile nel toolkit per questo è closest, che trova il primo elemento corrispondente un selettore, cercando in l'elemento si dà, allora la sua genitore, quindi suo genitore, ecc. Quindi, ad esempio, $(this).closest(".item").attr("id") o $(event.target).closest(".item").attr("id") (poiché gli elementi desiderati hanno classe item). Updated Fiddle Ma ancora una volta, credo # 1 è quello che si vuole in questo caso.