JQuery: auf Eingabe-Ereignis auf dynamisch erstellte Eingabefelder

Question

Ich versuche, alle Werte einer Tabelle zusammenzufügen. Dies sobald jemand einen Wert in ein Eingabefeld eingibt. Tabelle:

<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>

Die einzige Lösung, die ich bisher gefunden habe ist:

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

Das Problem hierbei ist, dass diese Linie alle Eingabefelder in dem Dokument liest, aber ich will nur die einer Reihe. Auch wenn ich es zu 'tbody' ändern würde, würde es nur alle Felder des tablebody lesen.

Also, was ich suche, ist eine Möglichkeit, nur diese Eingänge einer einzelnen Tabelle auszuwählen, so dass ich diese Werte nehmen und sie zusammenfügen kann.

Vielen Dank für die Hilfe!

Answer 1

Diese Antwort wird vorausgesetzt, Sie bedeuten, verwenden es mehrere <input> Elemente innerhalb der gleichen <tr> in Wirklichkeit sein wird, und Sie möchten die Gesamt in alle diese eingegeben.

Sie können dieses Ereignis weiterhin verwenden. Aber das Entscheidende ist, innerhalb dieses Ereignisses nur die Eingänge auszuwählen, die in die aktuelle Zeile fallen. Da Sie wissen, an welchem ​​Element das Ereignis aufgetreten ist, können Sie diese Informationen verwenden, um die übergeordnete Zeile herauszufinden und somit alle anderen Eingabeelemente in dieser Zeile zu ermitteln. Etwas wie folgt aus:

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

Bedenken oben Ich habe keine Validierung enthalten, ob die Eingabe in das Feld ist tatsächlich eine gültige ganze Zahl oder so etwas. Es lohnt sich, darüber nachzudenken.

Weiter, wenn Sie in die in der Nähe <td> wahrscheinlich am besten schreiben möchten, geben Sie <td> eine Klasse z. class="total", dann können Sie es leicht aktualisieren. Also statt

alert(total); 

in dem obigen Beispiel könnten Sie

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

Answer 2

können Sie .change für das

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