La fonction jquery (event) event.target.id est vide lorsque vous cliquez sur un lien texte

J'ai un menu latéral qui, lorsqu'on clique dessus, s'ouvre pour révéler un panneau de contenu. En fonction de l'élément de menu cliqué, j'ai évidemment besoin de choses différentes à remplir dans le panneau.La fonction jquery (event) event.target.id est vide lorsque vous cliquez sur un lien texte

J'ai écrit une fonction pour faire fonctionner le menu/panneau et cela fonctionne partiellement. Cependant, j'essaye de déterminer ce que charger basé sur event.target.id (car la fonction prend event) mais il a seulement une valeur quand je clique très près des bords du carré lié. Lorsque je clique près du texte actuel qui sont h1 et h6 et n'ont pas de id, cela ne fonctionne pas.

démo en direct (cliquer à proximité des bords de la place « Styles », puis au milieu): 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>

Comment puis-je corriger/améliorer cela pour que peu importe où dans le lien zone je clique?

Source

2013-03-29 tehaaron

Toujours inclure le balisage et le code appropriés ** dans la question elle-même **, ne pas simplement lier (même pas jsfiddle, bien que ce soit un joli plus). Pourquoi: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question –

il suffit de changer 'e.target.id '' this.id' fonctionner avec l'ID de l'élément lié et non de la cible. – adeneo

Remplacez event.target.id par event.currentTarget.id ou this.id.

Le event.target est toujours le plus profond élément cliqué, tandis que event.currentTargetthis ou pointe vers l'élément auquel le gestionnaire est lié, ou à l'élément que le sélecteur de délégué adapté.

Source

2013-03-29 09:22:36

Il semble qu'il y ait une bordure ou un bourrage sur certains éléments descendants, et donc event.target est un descendant de l'élément sur lequel le gestionnaire est (effectivement) connecté.

Deux options:

Utilisez this.id pour obtenir le id de l'élément le gestionnaire était (efficace) lié à. Cela fait habituellement ce que vous voulez. Updated Fiddle
Je ne pense pas que vous en avez besoin dans cette situation, mais l'autre outil pratique dans la boîte à outils pour cela est closest, qui trouve le premier élément correspondant à un sélecteur en regardant l'élément que vous lui donnez, sa parent, puis son parent, etc Ainsi, par exemple, $(this).closest(".item").attr("id") ou $(event.target).closest(".item").attr("id") (puisque les éléments que vous voulez avoir la classe item). Updated Fiddle Mais encore une fois, je crois que # 1 est ce que vous voulez dans ce cas.

Source

2013-03-29 09:23:33

La fonction jquery (event) event.target.id est vide lorsque vous cliquez sur un lien texte

Répondre

Questions connexes