Клавиша со стрелкой не перемещается в добавленный TR в ТАБЛИЦЕ

Question

У меня есть эта структура таблицы, которая использует клавиши со стрелками для перемещения по div в td. Навигация работает хорошо, когда страница загружается заново, но при более tr добавляются в таблицу с помощью Jquery append или insetAfter клавишу со стрелкой навигации не работает для новых trtd клеток

Вы можете увидеть my live example here

Ниже HTML структура таблицы:

<table id="product_table_body" class="table" border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
      <tr tabindex="0" id="1"> 
       <td><div class="product_id cells ">1</div></td> 
       <td><div class="product_name cells ">STREET</div></td> 
       <td><div class="product_prices product_cost_price cells ">1.00</div></td> 
       <td><div class="product_warehouse cells ">TAFO-WAREHOUSE</div></td> 
       <td><div class="product_quantity cells ">2</div></td> 
       <td><div class="product_prices product_retail_price cells ">4.00</div></td> 
       <td><div class="product_prices product_whole_sale_price cells ">0.00</div></td> 
       <td><div class="product_prices product_credit_price cells ">0.00</div></td> 
      </tr> 
     </tbody> 
</table> 

Jquery

var o = { 
    38: 'up', 
    40: 'bottom', 
    37: 'prev', 
    39: 'next' 
} 
var $cells = $('.cells'); 
var colcount = $("#product_table_body > tbody").find("> tr:first > td").length; 


//$(window).keydown(function (key) {  
$(document).on('keydown', '.product_table_body', function (key) { 
    var direction = o[key.which]; 
    var $active = $('.active'), $editing = $('.editing'), i=$cells.index($active);  

    if(!$active.length && !$editing.length && direction === 'bottom') 
    { 
     key.preventDefault(); 
     $cells.first().addClass('active').focus(); 
    } 
    else 
    { 
     if(direction === 'next') 
     { 
      $active.removeClass('active').parent('td').next('td').find($cells).first().addClass('active').focus(); 

     } 
     else if(direction === 'prev') 
     { 
      //if(!$editing.length) 
      $active.removeClass('active').parent('td').prev('td').find($cells).first().addClass('active').focus(); 
     } 
     else if(direction === 'up' || direction === 'bottom') 
     { 
      key.preventDefault(); 
      var p = direction === 'up' ? (i - colcount) : (i + colcount); 
      if(!$editing.length) 
      { 
       var activeRow = $cells.removeClass('active').eq(p).addClass('active').focus(); 
       var RowID = activeRow.closest('tr').attr('id'); 
       $('.table tbody tr#'+RowID).focus(); 
      } 
     } 
    }   
}); 

Благодаря

Answer 1

Вы полагаться на $cells в навигации:

i = $cells.index($active) 

….find($cells)… 

Однако $cells является статичной совокупностью всех ячеек, которые были в таблице, при переменная была инициализирована. Новые (добавленные) ячейки не будут найдены, если только ищут $cells.

Каждый раз, когда вы добавляете новые строки, вам нужно будет обновить $cells.

Answer 2

Как правильно указал Bergi, вам необходимо сбросить $cells. Вы можете попробовать сделать это в вашей event связывающей функции, как:

$(document).on('keydown', '#product_table_body', function (key) { 
    // get all cells 
    var $cells = $('.cells'); 
    var direction = o[key.which]; 
    var $active = $('.active'),$editing = $('.editing'), i=$cells.index($active); 
    : 
    : 
    : 

Кроме того, обратите внимание на # Перед product_table_body вместо . (период), потому что его и ID.