私はあなたのフィドルをフォークして、動作するバージョンを作成しました。
ここで問題が発生することから始めるために、作成する最初の行にイベントリスナーを追加するのを忘れました。
それを解決した後、行の合計入力にクラスを追加し、呼び出し元の参照（$(this)）を使用してリスナーでそのクラスにフィルターをかける必要があります。
したがって、コードを次のように変更する必要があります。
HTML
<body>
<center>
<div class="header">
<p class="left">
VAT NO. 1234567
</p>
<p class="center">
ABC Company
<br>
<span>
Address Here
</span>
</p>
<p class="right">
TEL:123563636
<br/>
132345675643
<br/>
</p>
</div>
<br/>
<hr/>
<div class="content">
<table id="myTable">
<tr>
<td width="20px">
S.No.
</td>
<td width="400px">
Description
</td>
<td width="50px">
Quantity
</td>
<td>
Unit Price
</td>
<td>
Line Total
</td>
</tr>
<table>
<div class="button">
<input type="button" id="btnAdd" onclick="AddRow()" value="Add Item"/>
</div>
<div>
</center>
</body>
JS
var i=0;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>')
$('#price'+i+'').blur(function() {
alert('Handler for .blur('+i+') called.');
$(this).parents("tr").find(".linetotal").val("Value Here");
});
}
$(document).ready(AddRow);
更新しました
私があなたに勧めるのは、次のことです。
- ライブイベントリスナーを追加します。これにより、作成する行ごとにイベントリスナーを追加する必要がなくなります。これは、ライブが自動的に行うためです。[注：liveはバージョン1.9で非推奨になりました。代わりに、onメソッドを実行する必要がありますが、それでも機能します]
- ぼかしの代わりに変更イベントを使用します。
- 数量フィールドと価格フィールドにクラスを追加して、それらをより簡単な方法でフィルタリングします。
これにより、JavaScriptを次のように変換できます（ここでフィドルを確認できます）。
var i=0;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'" class="quantity"></td><td><input type="text" id="price'+i+'" name="price'+i+'" class="price"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>');
}
$(document).ready(function(){
$(".price, .quantity").live("change", function() {
var item_quantity = parseInt($(this).parents("tr").find(".quantity").val());
var unit_price = parseInt($(this).parents("tr").find(".price").val());
var total_value = unit_price * item_quantity;
console.info(item_quantity, unit_price, total_value);
if(!isNaN(total_value))
$(this).parents("tr").find(".linetotal").val(total_value);
});
AddRow();
});