title: JQuery .on('keydown',...) not triggering on new elements
body: <p>I looked through some related questions, but none helped me figure out my problem.</p>
  
  <p>I have my own dynamic data grid form built from scratch, where rows of data and field columns can be added/removed etc. I'm trying to improve the usability so that pressing the enter key will create a new field column and give focus to it. Here's the code that does this so far:</p>
  
  <pre><code>$('#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();
      }
  });
  </code></pre>
  
  <p><code>#addfield</code> is a button which adds the field column when clicked.</p>
  
  <p><code>._field</code> is an input box where the name of the field is written.</p>
  
  <p><code>#data_fields</code> is a tr containing cells with <code>._field</code> input boxes in them.</p>
  
  <p>However, the <code>._field</code> input boxes in the new columns do not have the special superelement keydown ability. Whats more, if I change the <code>('#data_fields')</code> selector for <code>.on()</code> to <code>(document)</code>, it doesn't even give current elements the keydown callback.</p>
  
  <p>Here's the HTML, sorry that its a bit messy but I use templates in PHP and stuff:</p>
  
  <pre><code>&lt;thead id="doc_fields"&gt;
    &lt;tr id="delrow"&gt;
    &lt;tr id="data_fields"&gt;
      &lt;td style="padding:2px"&gt;&lt;input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="" name="Fields[]"&gt;&lt;/td&gt;
      &lt;td style="padding:2px"&gt;&lt;input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="b" name="Fields[]"&gt;&lt;/td&gt;
      &lt;td style="padding:2px"&gt;&lt;input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"&gt;&lt;/td&gt;
      &lt;td style="padding:2px"&gt;&lt;input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"&gt;&lt;/td&gt;
      &lt;td id="addcol" class="midi" style="width:25px" rowspan="3"&gt;
        &lt;a id="addfield" onclick="inscol('#addcol','&lt;td style=\'padding:2px\'&gt;&lt;input onchange=\'sync_doc_table();\' type=\'text\' name=\'Fields[]\' value=\'\' style=\'width:90%\' /&gt;&lt;/td&gt;');addcol('#typerow','&lt;td&gt;&lt;select name=\'Type[]\' style=\'width:91%\'&gt;&lt;option value=\'integer\'&gt;integer&lt;/option&gt;&lt;option value=\'double\'&gt;double&lt;/option&gt;&lt;option value=\'string\' selected=\'selected\'&gt;string&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;');addcol('#delrow','&lt;td class=\'center _delly\'&gt;&lt;a href=\'#\' onclick=\'del_doc_field($(this).parent());return false;\'&gt;&lt;img src=\'/images/icons/x.png\' alt=\'[Del]\' /&gt;&lt;/a&gt;&lt;/td&gt;');$('._colsp').attr('colspan', $('#addrow').attr('colspan') + 1);$('&lt;td&gt;&lt;input type=\'text\' name=\'Data[][]\' value=\'\' style=\'width:90%\' /&gt;&lt;/td&gt;').insertBefore('.datarow ._delly');return false;" href="#"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="typerow"&gt;
  &lt;/thead&gt;
  </code></pre>