javascript - .attr('id').length を取得しています。フォーカスに対する子供の入力の

Question

動的に挿入された行にキーパッド.keyboardを追加しようとしています。この後試したら$('.keyboard').keypad();行を挿入しています。$('button[id^="product"]').click()それは今働いています。

var count = 1;
$('button[id^="product"]').click(function () {
//adding row to table : WORKING FINE
var leng=$(this).attr('id').length;
var last = $(this).attr('id').substr(leng-4);
var newTr = $('<tr id="row_'+ count + last +'"></tr>');
newTr.html('<td width="29px" style="text-align:center;"><button class="del_row" id="'+ count + last +'" value="'+ item_price +'"> x </button></td><td width="144px"><input type="text" class="code" name="product'+ count +'" value="'+ prod_name +'" /></td><td width="44px" style="text-align:center;"><input class="keyboard" name="quantity'+ count +'" type="text" value="1" id="'+ quan +'"/></td><td style="width: 76px; padding-right: 10px; text-align:right;"><input type="text" class="price" name="price'+ count +'" value="'+ item_price +'" id="'+ pric +'"/></td>');

newTr.appendTo("#saletbl");

count++;         
});

$('.keyboard').keypad({
var leng=$(this).attr('id').length;
var last = $(this).attr('id').substr(leng-4);
}); //not working

私はこのテーブルを試し.onましたが、動作しません

$("#saletbl").on("focus", ".keyboard", function() {

$('.keyboard').keypad({
var leng=$(this).attr('id').length;
var last = $(this).attr('id').substr(leng-4);
}); //not working

});

内部$('button[id^="product"]').click()で試してみると、機能しており、キーパッドが表示されています

var count = 1;
$('button[id^="product"]').click(function () {
//adding row to table : WORKING FINE

$('.keyboard').keypad({
var leng=$(this).attr('id').length;
var last = $(this).attr('id').substr(leng-4);
}); // working but variable are being changed with parent

count++;         
});

私の問題は、これをメイン関数に追加すると、変数がメイン関数でkeypad()変化することです。数量が変更された場合、その行の価格を変更する必要があります。要素を取得var leng = $(this).attr('id').length;するにはどうすればよいですか? .keyboard試してみましたが$(this).children().attr('id').length;、何もありません。var leng = $(this).attr('id').length;キーボード機能で各行を個別に持つ必要があります。あなたの助けは大歓迎です!