Получить ссылку нажал на меню

Question

Я использую JQuery, чтобы стрелять событие щелчка по меню:

<div id="context-menu"> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a tabindex="-1">Color</a></li> 
     <li><a tabindex="-1">Transparency</a></li> 
     <li><a tabindex="-1">Show/Hide</a></li> 
     <!-- <li class="divider"></li> 
     <li><a tabindex="-1">Separated link</a></li>--> 
     </ul> 
    </div> 

с этим кодом:

$('#context-menu').on('click', function(e) { 

console.log(e); 

}); 

и я понимаю, как я могу знать, какой Ли щелкнул.

Answer 1

Вы должны указать селектор для элементов, чтобы соответствовать нажмите

$('#context-menu').on('click', '.dropdown-menu > li', function(e) { 

теперь, в обработчике, this относится к щелкнули li элемента.

Answer 2

Параметр события имеет целевое свойство, которое является фактическим элементом, который был нажат (в данном случае либо li, либо a), используйте его для получения li.

var li = $(e.target).closest('.dropdown-menu li')[0] 

http://api.jquery.com/closest/

Answer 3

tabindex="-1" используется намеренно ли? Для доступа к клавиатуре эти tabindex es должны быть tabindex="0", не-1. См. http://webaim.org/techniques/keyboard/tabindex. Также похоже, что вы, вероятно, должны использовать <button> s, а не <a> s.

Вы должны добавить обработчик щелчка к <a> с так:

$('#context-menu a').click(function() { 
    // The <a> that was clicked. 
    var theAnchorTag = $(this); 
    // Its parent <li>. 
    var theLiTag = theAnchorTag.parent(); 
}); 

Заменить a с button в селекторе выше, если взять мою кнопку советы.

Answer 4

$('a').click(
    function(){ 
    console.log($(this).parent()); /* should return link's parent-node */ 
    console.log($(this).parent().index()); /* should return li's index */ 
    } 
)