テキスト入力$（document）.readyから作成しました.ready Keypress関数を取得します。

Question

JavaScript/JQueryに$（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>"); 
    } 
}); 

しかし、私はこの機能を経由してテキスト入力のいくつかを検証する：

$('.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)); 
    } 
}); 
}); 

これは、HTMLコードで生成された入力テキストボックスでは機能しますが、JavaScriptで追加された入力テキストボックスでは機能しません。これをどうやって解決するのですか？前もって感謝します。

Answer 1

あなたは.xxx()の代わりに.on('xxx')機能を使用して委任する必要があります。dynamicly作成 Elementsは、基本的なイベントをトリガしません。変更されない親にリスナーを配置する必要があります。

$('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)); 
    } 
}); 
});