带有箭头键的 Javascript 导航不适用于 AJAX 加载的内容输入

Question

加载的 ajax 内容上的 javascript 代码存在问题。

我有一个包含多个输入的表单，其中加载了这个 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

你的 div 有一个 id，而你的 JQuery 按键事件使用一个类？

也许改用这条线？

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

})

编辑:(将事件附加到 div 而不是输入)

使用它来将键连接到输入

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