Un evento de cambio jQuery en múltiples elementos

Tengo 3 cuadros de texto, todos con los mismos identificadores que proceso en ASP llevándolos a una matriz de controladores

Tengo un enlace que agrega un número ilimitado de cuadros de texto debajo de los primeros 3.

Mi actual statement de cambio:

$('input.#invent').change(function () { 

funciona bien para el evento de cambio en el primer cuadro de texto, pero los otros con la misma información no lo activan cuando se cambia

¿Cuál es la mejor estrategia para hacer que el evento de cambio se active cuando cambia cualquiera de las 3+ cajas de texto?

Cambia los tres elementos con el #invent ID a una clase en su lugar (los ID’s deben ser únicos ), o solo funcionará para el primer elemento, como lo que está sucediendo actualmente en tu caso.

Luego, puede orientar todos los elementos que tienen la clase .invent :

 $('input.invent').change(function () { // Here, $(this) refers to the specific element of the .invent class which 'changed' }): 

Lea más sobre la diferencia entre los selectores ID y Clase aquí .

Como id es único, deberías usar clase en su lugar. Luego puede iterar sobre su clase usando cada uno y aplicar $(this) para apuntar la entrada de change actual:

 $('input.invent').each(function () { $(this).change(function () { }); }); 

Digamos que tu HTML es así:

       

Ahora el Id debe ser único. Así que ponga una clase a todas las entradas como invent y el HTML será:

       

Y llame al evento de cambio como:

 // This would be called now for all the text-boxes $('input.invent').change(function () { // Your code here }): 

En el caso, no puede agregar clases para todos los cuadros de texto. Tu cámara simplemente hace esto:

 $("input:text").change(function () { // Your code here }): 

No puede usar ID para hacer referencia a más de un elemento. ¡Una ID debe ser ÚNICA en cualquier página HTML!

Usa una clase en su lugar :-).

@Eli responde exactamente las coincidencias para ti. Si quiere leer todos los cuadros de texto, puede usar el siguiente método.

  $('input[type=text]').each(function () { $(this).change(function () { alert($(this).val()); $(this).focus(); }); }); 

La mejor estrategia (95% del tiempo) : use una clase para agregar un oyente para múltiples elementos. Se espera que las identificaciones sean únicas. Las clases están hechas para esto y le brindarán la mayor capacidad de extensión en el futuro.

HTML:

   

jQuery:

 $('.invent').change(function () { // Do magical things }); 

Para el otro 5%:

Si prefiere usar identificadores únicos o nombres de campo únicos en lugar de una única clase, como se describe en la respuesta seleccionada, puede agregar un oyente para varios elementos nombrados de manera única, como sigue:

HTML:

    

puedes usar jQuery múltiples selectores :

 $('#invent1, #invent2, #invent3').change(function () { // Do magical things }); 

O puede usar jQuery starts with attribute selector:

 //target based on what input id starts with $('[id^="invent"]').change(function () { // Do magical things }); // OR target based on input name attribute starts with $('input[name^="something"]').change(function () { // Do magical things });