Count Elementi html creati dinamicamente con jquery

Question

Sto contando il numero di input sul documento corrente che hanno un valore. Funziona bene, tranne quando ho aggiunto dinamicamente più input. Non riesco ad ottenere valori.

Per esempio io possa avere

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

dinamicamente creato dopo scatto del tasto

<input id="participant-15" /> 

Prendo il valore di ognuno in un ciclo for come

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

Ora quando eseguo un ciclo for per controllare il valore di ognuno di questi ingressi, ottiene solo i valori degli input che sono in errore Creati dinamicamente. Ho esaminato le altre domande qui e ancora non riesco a vedere come applicare qualcosa come .on() a quello che sto cercando di realizzare.

NUOVO SEGUITO DOMANDA ok, ora penso che questo è il posto dove ho bisogno di più chiarimento sul come utilizzare il .on.

Ho un jsfiddle qui: JsFiddle example

dove creo nuovi elementi e sulla confusione di tutte le caselle di testo Vorrei calcolare quanti degli elementi hanno un valore e di accedervi. Ora al momento risponderà dall'evento sfocatura con elementi statici. Non funziona per gli elementi creati dinamicamente

Answer 1

Dategli una classe comune:

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

e lo fanno come:

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

E per rispondere alla edit:

La sintassi dovrebbe essere: $ (container_selector). on (event_type, target_selector, callback)

JSFiddle Demo

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

Answer 2

potrebbe anche prendere in considerazione l'uso del selettore di attributo CSS.

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

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

Answer 3

Utilizzo di un selettore di classe farà risparmiare tempo qui.

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

Quindi utilizzare una semplice chiamata conteggio ...

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

Spero che troviate questo utile