JQuery：動的に作成された入力フィールドの入力イベント

Question

tablerowのすべての値を一緒に追加しようとしています。誰かが入力欄に値を入力するとすぐにこれが行われます。 表：

<table> 
 
    <thead> 
 
    <tr> 
 
    <th> 
 
     Title 
 
    </th> 
 
    <th> 
 
     Input 
 
    </th> 
 
    <th> 
 
     Total 
 
    </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!-- Dynamially Generated Table Columns --> 
 
    <tr> 
 
     <td>Example</td> 
 
     <td><input type="text" class="inputField" /></td> 
 
     <td>Total: x</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

私がこれまでに見つけた唯一の解決策は次のとおりです。ここ

$(document).on('input', '.inputField', function(){ /* Do something */}); 

問題は、この行は、ドキュメント内のすべての入力フィールドを読み込むことであり、しかし、私は1列のものだけを必要とします。 また、'tbody'に変更すると、テーブルボディのすべてのフィールドが読み取られます。

私が探しているのは、単一のタブローの入力を選択する方法なので、これらの値を取り込んで一緒に追加することができます。

ありがとうございました！

Answer 1

ため.changeを使用することができ、そして、あなたはこれらのすべてに入力された合計をしたいです。

このイベントは引き続き使用できます。しかし、重要なことは、そのイベント内で、現在の行に含まれる入力のみを選択することです。イベントが発生した要素が分かっているので、その情報を使用して親行を検索し、その行内の他のすべての入力要素を検出できます。

$(document).on('input', '.inputField', function(){ 
    var parentRow = $(this).parents("tr").first(); 
    var inputs = parentRow.find('input[type="text"]'); 
    var total = 0; 
    inputs.each(function(){ 
    total += parseInt(this.value); 
    }); 
    alert (total); 
}); 

上記を念頭に置いてくださいフィールドへの入力が実際に有効な整数なのかどうかの検証は含まれていません。これを考慮する価値があります。

さらに、<td>の近くに書いておきたい場合は、おそらくそれを<td>に教えてください。 class="total"、それを簡単に更新することができます。だからではなく、上記の例で

alert(total); 

の、あなたは意味がありません「一緒にすべてを追加」そう、あなたの例の行で唯一のフィールドがあります

parentRow.find(".total").text(total); 

Answer 2

あなたはこの答えは、あなたが実際に同じ<tr>内に複数の<input>の要素が存在することになるわけ想定していること

$('input[name=myInput]').change(function() { ... });