Как переключить элементы списка (сделать навигацию) с помощью стрелок клавиатуры на Jquery (подгрузка через ajax)?

Question

[Иван Ильясов]

Скопировал и видеоизменил такой скриптик:
https://jsfiddle.net/dvwdboh0/3/

Дано:
Список (ul > li), который подгружается через ajax (человек вводит запрос и появляются элементы, live поиск)

html

<div id="ba_ajax_result">
  <ul id="ba_ajax_result_product">
    <li class="title_product">Товаров (3/3)</li>
    <li class="item_product ">
      <a href="//google.ru"><span class="name_product">Гугл</span></a>
    </li>
    <li class="item_product ">
      <a href="//ya.ru"><span class="name_product">Яндекс</span></a>
    </li>
    <li class="item_product ">
      <a href="//ok.ru"><span class="name_product">Одноклассники</span></a>
    </li>
    <li>
      <a id="ba_prev_product" class="ba_prev" href="javascript:void(0)" rev="1" onclick="prevProduct()">&lt;&lt;&nbsp;Назад</a>
      <a id="ba_next_product" class="ba_next" rev="1" href="javascript:void(0)" onclick="nextProduct()">Вперед&nbsp;&gt;&gt;</a>
    </li>
  </ul>
</div>

js

$(document).ready(function() {
  $('#ba_ajax_result_product li.item_product:nth-of-type(2)').addClass('active');
  $(window).keyup(function(e) {
    var $current = $('#ba_ajax_result_product li.item_product.active');
    var $next;
    if (e.keyCode == 38)
      $next = $current.prev('li.item_product');
    if (e.keyCode == 40)
      $next = $current.next('li.item_product');
    if (e.keyCode == 13) {
      $('#ba_ajax_result_product li.item_product > a').click();
    }
    if ($next.length > 0) {
      $('#ba_ajax_result_product li.item_product').removeClass('active');
      $next.addClass('active');
    }
  });
});

css

.active {
  background: yellow;
  font-weight: bold;
}

Задача:

1. Сделать так, чтобы работало с динамически подгружающимися элементами (ajax)
   
2. Назначить первому элементу списка ссылок класс active
   
3. Переключать элементы нажатием вверх/вниз на клавиатуре
   
4. При нажатии на Enter кликнуть по ссылке выделенного элемента
   

Часть уже сделана, вопросы по 1-ому и 4-ому пункту задачи. (Возможно, во 2-ом пункте тоже как-то по-другому сделать можно)

Помогите плиз!

Comments

[Kovalsky]

И в чем возникли сложности при реализации?

Enter и так открывает выбранную ссылку, это дефолтный функционал. Ссылку просто надо фокусить, как здесь.

"Сделать так, чтобы работало с динамически подгружающимися элементами (ajax)" - а что, сейчас не работает?

[Иван Ильясов]

Никита Полевой: При нажатии на кнопку Enter он никуда не переходит. То есть по ссылке не нажимается, хотя событие клика по Enter происходит.

Как у тебя нажатие на Enter реализовано?

[Kovalsky]

Иван Ильясов:

Enter и так открывает выбранную ссылку, это дефолтный функционал. Ссылку просто надо фокусить, как здесь.

Никак не реализовано нажатие) Просто надо фокусить ссылки. По нажатию на enter открывать ссылку в фокусе - дефолтный функционал. Следовательно, вам тоже есть смысл фокусить ссылки, тогда по нажатию enter они будут открываться.

[Иван Ильясов]

Никита Полевой: Ну я сам в шоке.
Вот сайт: https://goo.gl/LBrK2i
Введи в поиске "маги"

Смысл в том, чтобы при нажатии на клаве вниз или вверх первый элемент фокусился, но он не фокусится.

Если аккуратно подвести мышь к нижнему правому углу блока с книгой, так чтобы курсор сменился на стрелку и кликнуть, то только в этом случае элемент выделяется и его можно переключить на клаве вверх/вниз.
Но кликнув Enter он всё равно никак не хочет переходить по ссылке.

Код JS:

$(document).ready(function(){
	$('div#ba_ajax_result').on('focus', 'li', function() {
		$this = $(this);
		$this.addClass('active-itm').siblings().removeClass('active-itm');
	}).on('keydown', 'li', function(event) {
		$this = $(this);
			if (event.keyCode == 40) {        
				$this.next().focus();
				return false;
			} else if (event.keyCode == 38) {        
				$this.prev().focus();
				return false;
			} else if (event.keyCode == 13) {        
				$('li.item_product.active-itm > a').click();
			}
	}).find('li.item_product').first().focus();
});

[Kovalsky]

Иван Ильясов: потому что фокусить можно только элементы управления, LI к ним не относится. Фокусите ссылки. В самом примитивном случае $this.next().find('a').focus()

И кстати хорошо бы выделять ссылку которая в фокусе, а то ни хрена не понятно.

[Иван Ильясов]

Никита Полевой: Спасибо за подсказку!
Теперь всё работает.
Финальный код:

$('div#ba_ajax_result').on('focus', 'li', function() {
		$this = $(this);
		$this.addClass('active-itm').siblings().removeClass('active-itm');
	}).on('keydown', 'li', function(event) {
		$this = $(this);
			if (event.keyCode == 40) {        
				$this.next().find('a').focus()
				return false;
			} else if (event.keyCode == 38) {        
				$this.prev().find('a').focus();
				return false;
			} else if (event.keyCode == 13) {        
				$('li.item_product.active-itm > a').click();
			}
	});

    $(document).keydown(function (event) {
        if (event.which == 40 || event.which == 38) {
			$('li.item_product.active-itm').focus();
			return false;
        }
    });

Answer 1

[Kovalsky]

В общем небольшие итоги переписки в комментариях: при попытке по нажатию клавиши enter открывать ссылку с помощью $().click генерируется untrusted событие, поэтому ссылка не открывается. Зато нажатие на enter по дефолту открывает ссылку если она в фокусе, это можно сделать с помощью $().focus. А т.к. никакого кеша в помине нет, то четвертый пункт ("Сделать так, чтобы работало с динамически подгружающимися элементами") выполняется автоматически.