JQuery.on( "keydown",...) не запускает новые элементы

Я просмотрел некоторые связанные вопросы, но никто не помог мне разобраться в моей проблеме.

У меня есть своя собственная динамическая структура данных, построенная с нуля, где строки и столбцы полей можно добавлять/удалять и т.д. Я пытаюсь улучшить удобство использования, так что нажатие клавиши ввода создаст новый столбец полей и сосредоточьтесь на этом. Вот код, который делает это до сих пор:

$('#data_fields').on('keydown','._field',function(e){
    if(e.which==13)
    {
        $('#addfield').click();
        var o=$(this).parent().parent();
        var l=$(o).children().length-2;
        var f=$(o).find("td:eq("+l+")").find("._field");
        $(f).focus();
    }
});

#addfield - кнопка, которая добавляет столбец поля при нажатии.

._field - это поле ввода, в котором записано имя поля.

#data_fields представляет собой tr содержащую ячейки с ._field полями ввода в них.

Тем не менее, поля ввода ._field в новых столбцах не обладают специальной способностью к суперэлементу. Более того, если я изменяю селектор ('#data_fields') для .on() до (document), он даже не дает текущим элементам обратный вызов keydown.

Вот HTML, извините, что его немного грязно, но я использую шаблоны в PHP и прочее:

<thead id="doc_fields">
  <tr id="delrow">
  <tr id="data_fields">
    <td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="" name="Fields[]"></td>
    <td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="b" name="Fields[]"></td>
    <td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
    <td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
    <td id="addcol" class="midi" style="width:25px" rowspan="3">
      <a id="addfield" onclick="inscol('#addcol','<td style=\'padding:2px\'><input onchange=\'sync_doc_table();\' type=\'text\' name=\'Fields[]\' value=\'\' style=\'width:90%\' /></td>');addcol('#typerow','<td><select name=\'Type[]\' style=\'width:91%\'><option value=\'integer\'>integer</option><option value=\'double\'>double</option><option value=\'string\' selected=\'selected\'>string</option></select></td>');addcol('#delrow','<td class=\'center _delly\'><a href=\'#\' onclick=\'del_doc_field($(this).parent());return false;\'><img src=\'/images/icons/x.png\' alt=\'[Del]\' /></a></td>');$('._colsp').attr('colspan', $('#addrow').attr('colspan') + 1);$('<td><input type=\'text\' name=\'Data[][]\' value=\'\' style=\'width:90%\' /></td>').insertBefore('.datarow ._delly');return false;" href="#">
    </td>
  </tr>
  <tr id="typerow">
</thead>

Ответ 1