Text Input Created from $(document).ready Get Keypress Function

Question

I have a function in my JavaScript/JQuery that populates a form on $(document).ready.

$(document).ready(function build_item_table() {
    for (var x = 1; x <= 20; x++) {
        $('#item_table tbody').append("<tr>");
        $('#item_table tbody').append("<td><select id=\"item_" + x + "_budget\" name=\"item_" + x + "_budget\" class=\"item_budget\" width=\"110px\"><option>Loading...</option></select></td>");
        $('#item_table tbody').append("<td><input type=\"text\" id=\"item_" + x + "_code\" name=\"item_" + x + "_code\" class=\"code_textbox\" size=\"20\"></td>");
        $('#item_table tbody').append("<td><input type=\"text\" id=\"item_" + x + "_description\" name=\"item_" + x + "_description\" class=\"desc_textbox\" size=\"83\"></td>");
        $('#item_table tbody').append("<td><input type=\"text\" id=\"item_" + x + "_quantity\" name=\"item_" + x + "_quantity\" class=\"cost_textbox\" size=\"7\" value=\"0\" required></td>");
        $('#item_table tbody').append("<td>$&nbsp;<input type=\"text\" id=\"item_" + x + "_unit\" name=\"item_ " + x + "_unit\" class=\"qty_textbox\" size=\"10\" value=\"0.00\" required></td>");
        $('#item_table tbody').append("<td>$&nbsp;<input type=\"text\" id=\"item_" + x + "_total\" name=\"item_" + x + "_total\" class=\"cost_textbox\" size=\"10\" value=\"0.00\" required></td>");
        $('#item_table tbody').append("</tr>");
    }
});

However, I want to validate the some of the text inputs via this function (btw, I take no credit for this function since I found it on here from this great community):

$('.cost_textbox').keypress(function(eve) {
  if ((eve.which != 46 || $(this).val().indexOf('.') != -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0) ) {
    eve.preventDefault();
  }

// this part is when left part of number is deleted and leaves a . in the leftmost position. For example, 33.25, then 33 is deleted
$('.cost_textbox').keyup(function(eve) {
  if($(this).val().indexOf('.') == 0) {    
    $(this).val($(this).val().substring(1));
  }
 });
});

This works for the Input Textboxes generated in the HTML code, but not to the ones appended in JavaScript. How do I fix this? Thanks in advance.

Answer 1

You need to delegate using the .on('xxx') function instead of .xxx() : Elements created dynamicly won't trigger the basic events. You need to put the listener on a parent that won't change.

$('body').on('keypress','.cost_textbox',function(eve) {
  if ((eve.which != 46 || $(this).val().indexOf('.') != -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0) ) {
    eve.preventDefault();
  }

// this part is when left part of number is deleted and leaves a . in the leftmost position. For example, 33.25, then 33 is deleted
$('body').on('keyup','.cost_textbox',function(eve) {
  if($(this).val().indexOf('.') == 0) {    
    $(this).val($(this).val().substring(1));
  }
 });
});