Javascript navigation with arrow key not working on AJAX loaded content inputs

Question

there is a problem with javascript code on ajax content loaded.

i have a form with multiple inputs that loaded with this ajax code :

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

result of above code loaded in below div

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

now, i have a javascript code for navigation on inputs by tabindex number with arrow keys:

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

but above code not working on loaded content inputs.

note: loaded content show on browser but not exist on html page source code

please help me

thanks

your issue seems to be related to `dynamic event binding` take a look at [Attach an event to dynamic elements in javascript](https://stackoverflow.com/q/34896106/2417602) — vikscool, Nov 02 '18 at 09:08

Christheoreo · Accepted Answer · 2018-11-02T13:03:05.447

1

You div has an id, while your JQuery key down event uses a class?

Perhaps use this line instead?

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

})

EDIT: (attached event to div rather than the input)

Use this to attach the key down to the input

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

edited Nov 02 '18 at 13:03

answered Nov 02 '18 at 09:06

Christheoreo

373
3
15

yes, i used my div id and your solution, but not working yet – Abbas.Kh Nov 02 '18 at 09:41
swap 'input' and '#pricelist' - the current code attaches the key down event to the div, not the input. – Christheoreo Nov 02 '18 at 10:59

score 0 · Answer 2 · answered Nov 02 '18 at 09:17

You are replacing your html content. so DOM is unable to bind that event, again you need to bind it after replacing your content.

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 navigation with arrow key not working on AJAX loaded content inputs

2 Answers2