Getting .attr('id').length; of childer input on focus
<p>I am trying to add keypad on <code>.keyboard</code> with <code>$('.keyboard').keypad();</code> to dynamically inserted row. I am inserting row with <code>$('button[id^="product"]').click()</code> If i try after this. Its is now working.</p>

<pre><code>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 = $('&lt;tr id="row_'+ count + last +'"&gt;&lt;/tr&gt;');
newTr.html('&lt;td width="29px" style="text-align:center;"&gt;&lt;button class="del_row" id="'+ count + last +'" value="'+ item_price +'"&gt; x &lt;/button&gt;&lt;/td&gt;&lt;td width="144px"&gt;&lt;input type="text" class="code" name="product'+ count +'" value="'+ prod_name +'" /&gt;&lt;/td&gt;&lt;td width="44px" style="text-align:center;"&gt;&lt;input class="keyboard" name="quantity'+ count +'" type="text" value="1" id="'+ quan +'"/&gt;&lt;/td&gt;&lt;td style="width: 76px; padding-right: 10px; text-align:right;"&gt;&lt;input type="text" class="price" name="price'+ count +'" value="'+ item_price +'" id="'+ pric +'"/&gt;&lt;/td&gt;');

newTr.appendTo("#saletbl");

count++;         
});

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

<p>I tried <code>.on</code> table this But not working</p>

<pre><code>$("#saletbl").on("focus", ".keyboard", function() {

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

});
</code></pre>

<p><strong>If i try inside <code>$('button[id^="product"]').click()</code> It is working and showing up keypad</strong></p>

<pre><code>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++;         
});
</code></pre>

<p>My problem is when i add this in main function the variables in <code>keypad()</code> are changing with the main functions. I need to change the price of that row if quantity is changed. How can I get <code>var leng = $(this).attr('id').length;</code> for <code>.keyboard</code> element? I tried <code>$(this).children().attr('id').length;</code> But nothing. I need to have <code>var leng = $(this).attr('id').length;</code> for each row separately in keyboard function. Your help is much appreciated!</p>
