JQuery .on ('keydown', ...) ne se déclenche pas sur de nouveaux éléments

J'ai regardé à travers des questions connexes, mais aucun ne m'a aidé à comprendre mon problème.

J'ai mon propre dynamique de données de forme d'une grille construite à partir de zéro, où les lignes de données et de colonnes peuvent être ajoutées ou enlevées etc. Je suis en train d'essayer d'améliorer la facilité d'utilisation, de sorte qu'en appuyant sur enter (entrée) pour créer une nouvelle colonne et donner le focus. Voici le code qui fait cela pour l'instant:

$('#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 est un bouton qui ajoute le champ de colonne lorsque vous cliquez dessus.

._field est une zone de saisie où le nom du champ est écrit.

#data_fields est un tr contenant des cellules avec ._field des zones de saisie.

Cependant, la ._field des boîtes d'entrée dans les nouvelles colonnes n'ont pas le spécial superelement keydown capacité. Quoi de plus, si je change le ('#data_fields') sélecteur pour .on() à (document)il n'a même pas de donner des éléments de courant le keydown de rappel.

Voici le code HTML, désolé que son un peu brouillon, mais j'utilise des templates en PHP et trucs:

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

source d'informationauteur Deji