Graf Dynamisch erstellte HTML-Elemente mit jquery

Question

Ich zähle die Anzahl der Eingänge auf dem aktuellen Dokument, die Wert haben. Es funktioniert gut, außer wenn ich dynamisch mehr Eingaben hinzugefügt habe. Ich kann dort keine Werte finden.

Zum Beispiel kann ich

<input id="participant-1"/> 
<input id="participant-2"/> 
... 

dynamisch nach Button-Klick erstellt

<input id="participant-15" /> 

Ich werde den Wert eines jeden in einer for-Schleife wie

for(var i =1 ; i <25; i++) 
{ 
    ...$('input#participant-' + i).val(); 
} 

Jetzt erhalten Wenn ich eine for-Schleife verwende, um den Wert jedes dieser Eingänge zu prüfen, erhält er nur die Werte der Eingänge, die weren 't dynamisch erstellt. Ich habe mir die anderen Fragen hier angesehen und kann immer noch nicht sehen, wie ich etwas wie .on() auf das anwenden kann, was ich erreichen möchte.

NEW VERFOLGUNG FRAGE ok, jetzt denke ich, das ist, wo ich mehr Klärungsbedarf darüber, wie die .on zu verwenden.

Ich habe einen jsfiddle hier: JsFiddle example

, wo ich neue Elemente zu erstellen und auf Unschärfe aller Textfelder würde ich berechnen, wie viele der Elemente Wert haben und es loggt sein. Jetzt reagiert es momentan auf Blur-Ereignisse mit Elementen, die statisch sind. Es funktioniert nicht für dynamisch erstellte Elemente

Answer 1

Geben Sie ihm eine gemeinsame Klasse:

<input class="textbox" id="participant-1"/> 
<input class="textbox" id="participant-2"/> 

Und es anfreunden:

var values = []; 
$('.textbox').each(function(){ 
    values.push($(this).val()); 
}); 
console.log(values) 

Und die Bearbeitung zu beantworten:

Die Syntax sollte sein: $ (container_selector) .on (event_type, target_selector, callback)

JSFiddle Demo

$('.name').on('blur', 'input', calculate_total); 

Answer 2

konnte auch die Verwendung des Wählers CSS-Attribut betrachten.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

$("input[id|=participant]").each(function(){ 
      // something 
    }); 

Answer 3

eine Klasse-Selektor wird hier Zeit sparen.

<input id="participant-1" class="participant"/> 
<input id="participant-2" class="participant"/> 

Dann eine einfache Zählung-Aufruf ...

var count = $('.participant').length 
alert ('You have ' + count + ' Counted Inputs'); 
//result is 2 

Hoffe, dass Sie diese nützliche