Duda con formulario dinamico

[Suarsan]

Tengo un formulario que contiene un select. Tengo también un script javascript que detecta si selecciono una opción diferente a la que muestra por defecto el select. Hasta aquí todo bien.

Ahora, debajo de ese select tengo un botón que añade otro select exactamente igual debajo del primero (y así sucesivamente). Y aquí es donde viene el problema, el código javascript parece que "pasa" de escuchar a estos nuevos select creados dinámicamente.. Solo escucha los cambios en el primer select creado directamente en el HTML. Os enseño el código a ver si podeis ayudarme. Gracias!!

Codigo HTML

Código:

<div class="container-fluid">
	<section class="row main">
		<article class="col-xs-12">
			<form class="form-inline" action="asistente_enviar.php" method="post">
				<div id="cajonprincipal">
					<div id="cajon1" class="form-group">
						<input id="pregunta1" class="form-control" type="text" placeholder="¿Vas a?">
						<select id="select" class="form-control" name="select1" >
  							<option value="0" selected>Si/No</option> 
  							<option value="2">2 opciones a elegir</option>
  							<option value="3">3 opciones a elegir</option>
						</select>
					</div>
				</div>
				<button class="form-control" type="button" id="botonmas" onclick="addFields()">Añadir</button>
				<input class="form-control btn btn-primary" type="submit" value="Terminar y rellenar"/>
			</form>		
		</article>
	</section>
</div>

Javascript para detectar cuando selecciono otra opcion

Código:

       $('select#select').on('change',function(){
    			var valor = $(this).val();
    			var idaux = $(this).parent().attr("id");
    			//alert(idaux);
    			var container = document.getElementById();
    			for(i=0;i<valor;i++){
    				var input = document.createElement("input");
               	         	input.id = "Opcion"+(i+1);
                		input.className = "form-control";
               			input.type = "text";
               			input.placeholder = "Editar opcion"+(i+1);
               			container.appendChild(input);
    			}
	});

Javascript para añadir input y select desde el boton añadir

Código:

n=1;
function addFields(){
            n++;
           
            var cajon = document.createElement("div");
            cajon.id = "cajon"+n;
            cajon.className = "form-group";
            cajonprincipal.appendChild(cajon);

            var input = document.createElement("input");
            input.id = "pregunta"+n;
            input.className = "form-control";
            input.type = "text";
            input.placeholder = "Editar pregunta "+n;
            cajon.appendChild(input);
            
            var select = document.createElement("select");
            select.id="select";
            select.className = "form-control";
            select.name = "select";
            cajon.appendChild(select);
            
            var op1 = document.createElement("option");
            op1.value = ("0");
            op1.text = ("Si/No");
            select.appendChild(op1);
            var op2 = document.createElement("option");
            op2.value = ("2");
            op2.text = ("2 opciones a elegir");
            op2.selected = "selected";
            select.appendChild(op2);
            var op3 = document.createElement("option");
            op3.value = ("3");
            op3.text = ("3 opciones a elegir");
            select.appendChild(op3);
}

[Alexis88]

Delega el evento y no repitas el id ya que debe de ser un dato único en todo el documento. En su lugar, usa una misma clase pues ese dato sí puede repetirse.

Código Javascript:

//Cuando se produzca el evento 'change' en el entorno del objeto global
window.addEventListener("change", function(event){
    //Verifico si el elemento en el que se produjo el evento posee la clase
    if (event.target.className == "tuClase"){
        //Instrucciones
    }
}, false);
 

Saludos

[Suarsan]

Iniciado por Alexis88

Delega el evento y no repitas el id ya que debe de ser un dato único en todo el documento. En su lugar, usa una misma clase pues ese dato sí puede repetirse.

Código Javascript:

//Cuando se produzca el evento 'change' en el entorno del objeto global
window.addEventListener("change", function(event){
    //Verifico si el elemento en el que se produjo el evento posee la clase
    if (event.target.className == "tuClase"){
        //Instrucciones
    }
}, false);
 

Saludos

Muchisimas gracias! Gran descubrimiento poder usar el elemento "window" en vez de el elemento exacto..

Pero a pesar de eso no me funciona.. Es decir, me funciona pero estoy usando bootstrap y el elemento lleva la clase "form-control" y parece "incompatible", ya que si le quito la clase "formcontrol" funciona correctamente. ¿Alguna idea?

PD: FALLO MÍO!! SOLUCIONADO!! MIL GRACIAS!