JQuery метод делегата не работает для KeyDown и нажатия клавиши

Question

Я хочу получить TAB ключ
Если нажата, то
выполнить мой код
и e.preventDefault();

$().ready(function(){ 
    $("div").delegate(".note","keydown",function(e){ 
     //not working 
    }); 

    $("div").delegate(".note","keypress",function(e){ 
     //not working 
    }); 

    $("div").delegate(".note","click",function(e){ 
     //working fine 
    }); 
}); 

для тестирования Я проверил вышеуказанные события только с предупреждением (9);
Работа с кликами работает только при нажатии и нажатии клавиши.

Answer 1

Что-то вроде этого будет работать, если «.note» в элементе, который принимает фокус.

JS

$(function(){ 
    $("div").delegate(".note","keydown",function(e){ 
     if(e.originalEvent.keyCode == 9){ 
      console.log('Tada!'); 
      e.preventDefault(); 
     } 
    }); 
}); 

См: http://jsfiddle.net/fcEx5/

Answer 2

Заканчивать это реализация, это немного более сложным, чем то, что вы просили, но вы можете использовать его, он использует on() вместо delegate() который рекомендуется:

<button id="myButton"> Click Me </button> 
<input type="text" id="myText" /> 

js

function myFunction(){ 
    alert("hi!"); 
} 



$(document).ready(function(){ 

    $("#myButton").on("click",myFunction); 
    $("#myText").on("keydown",function(e){ 
     var keyCode = e.keyCode || e.which; 
     if (keyCode == 9) { 
      e.preventDefault(); 
      myFunction(); 
      } 
    }); 

}); 

Кнопка TAB или щелчок на кнопке вызовет функцию, также некоторую документацию о on()

.он() метод присоединяет обработчики событий выбранного в данный момент установлен элементов в объект jQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий.

И, наконец, здесь рабочий demo

Answer 3

На самом деле, keydown и keypress имеют цель body, если элемент не находится в фокусе:

Когда элемент ориентирован, ключевые события, полученные в документе должен быть указан у этого элемента. Не может быть целенаправленного элемента; когда элемент не сфокусирован, события ключа, полученные документом, должны быть нацелены на на элемент кузова.

источник: (! Ваши обработчики просто не срабатывают) https://www.w3.org/TR/html50/editing.html#focus

Так что проблема не делегируя сама, а делает элемент Focusable. Чтобы произвольный элемент мог получать фокус, используйте атрибут tabindex для элементов, которые должны иметь обработчики ключевых событий (подробнее см. here).