Навигация по Javascript с помощью клавиши со стрелкой, не работающей на входах содержимого, загруженных AJAX

Question

существует проблема с кодом JavaScript на загруженном содержимом ajax.

У меня есть форма с несколькими входами, которые загружены с этим кодом ajax:

    function listfetch(typeval)
{
 var shopid = document.getElementById("shopid").value;
 $.ajax({
 type: 'post',
 url: 'select.php',
 data: {
  brand:typeval,
  shopid:shopid
 },
 success: function (response) {
  $('#pricelist').html(response);
 }
 });
}

результат вышеуказанного кода загружен в ниже div

<div id="pricelist"></div>

Теперь у меня есть код JavaScript для навигации по входам по номеру tabindex с помощью клавиш со стрелками:

<script>
     $(document).ready(function(eOuter) {
  $('input').on('keydown', '.pricelist' , function(eInner) {
var tabindex = $(this).attr('tabindex');
        if (eInner.which === 37) { //left
      tabindex++;
      $('[tabindex=' + tabindex + ']').focus();
    }
    if (eInner.which === 39) { //right
      tabindex--;
      $('[tabindex=' + tabindex + ']').focus();
    }
    if (eInner.which === 38) { //down
      tabindex-=3;
      $('[tabindex=' + tabindex + ']').focus();
    }
  });
});
    </script>

, но код выше не работает на входах загруженного контента.

примечание: загруженный контент отображается в браузере, но отсутствует в исходном коде html-страницы

пожалуйста, помогите мне

спасибо

Answer 1

Вы заменяете свой HTML-контент. поэтому DOM не может связать это событие, вам снова нужно связать его после замены контента.

function listfetch(typeval) {
        var shopid = document.getElementById("shopid").value;
        $.ajax({
            type: 'post',
            url: 'select.php',
            data: {
                brand: typeval,
                shopid: shopid
            },
            success: function (response) {
                $('#pricelist').html(response);
                bindClicks();
            }
        });
    }
    function bindClicks() {
        $('input').on('keydown', '.pricelist', function (eInner) {
            var tabindex = $(this).attr('tabindex');
            if (eInner.which === 37) { //left
                tabindex++;
                $('[tabindex=' + tabindex + ']').focus();
            }
            if (eInner.which === 39) { //right
                tabindex--;
                $('[tabindex=' + tabindex + ']').focus();
            }
            if (eInner.which === 38) { //down
                tabindex -= 3;
                $('[tabindex=' + tabindex + ']').focus();
            }
        });
    }

Answer 2

У вашего div есть идентификатор, а в событии нажатия клавиши JQuery используется класс?

Возможно, использовать эту строку вместо?

$('input').on('keydown', '#pricelist', function (e) {

})

РЕДАКТИРОВАТЬ: (прикрепленное событие к div, а не к входу)

Используйте это, чтобы прикрепить ключ вниз к входу

$('#pricelist').on('keydown', 'input', function (e) {
  //code 
})