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 
})

Answer 2

您正在替换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();
            }
        });
    }

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

2 个答案: