Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery .on('keydown',...) not triggering on new elements

Tags:

jquery

I looked through some related questions, but none helped me figure out my problem.

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:

$('#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 is a button which adds the field column when clicked.

._field is an input box where the name of the field is written.

#data_fields is a tr containing cells with ._field input boxes in them.

However, the ._field input boxes in the new columns do not have the special superelement keydown ability. Whats more, if I change the ('#data_fields') selector for .on() to (document), it doesn't even give current elements the keydown callback.

Here's the HTML, sorry that its a bit messy but I use templates in PHP and stuff:

<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>
like image 763
Deji Avatar asked Jan 30 '13 17:01

Deji


People also ask

What is e keycode === 13?

Keycode 13 is the Enter key.

What is the use of Keydown ()?

The keydown() is an inbuilt method in jQuery which is used to trigger the keydown event whenever User presses a key on the keyboard.

Is Keydown an event?

The keydown event is fired when a key is pressed. Unlike the deprecated keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.

What is Keydown event in jQuery?

jQuery keydown() Method keydown - The key is on its way down. keypress - The key is pressed down. keyup - The key is released.


1 Answers

From What I can tell it's because your input class that's being appended doesn't have a _field class in it.

like image 67
Brian Noah Avatar answered Sep 28 '22 02:09

Brian Noah