0

Hola a todos tengo un formulario el cual genera campos y esos campos creados pude ponerle la accion select2 poniendole una linea $('.selector').select2(); al js para invocar a los campos creados dinámicamente esa opción ya que sin esa linea solo lo hacia el campo padre.

aqui pongo parte de ese codigo.. comente la parte del codigo asi (/// POR FINNNNNNNNNNNNNNNNNNNN)donde esta la linea que hace la magia, la que hace que se incluya esa funcion select2 en los campos creados.

<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        //name="hora1" type="text" autofocus="autofocus" class="hora1" id="hora1" size="5"
                //New input field html
        var x = 1; //Initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Add field html.
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
        $(wrapper).on('keypress','.hora1',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
        $(wrapper).on('blur','.hora1',formatHour);
        $(wrapper).on('keypress','.hora2',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
        $(wrapper).on('blur','.hora2',formatHour);
    });
////-----------------------PARA LOS CAMPOS HIJOS--------------------------------
        $(document).ready(function(){
    var maxField2 = 10; //
    var addButton2 = $('.add_button2'); //agrega
    var wrapper2 = $('.field_wrapper2'); //wrapper  
    var x = 1; //Initial field counter is 1
    $(addButton2).click(function(){ //Once add button is clicked
        if(x < maxField2){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper2).append(fieldHTML2); // Add field html
            /// POR FINNNNNNNNNNNNNNNNNNNN
             $('.selector').select2();       
             console.log(x);
        }
    });
    $(wrapper2).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
        console.log(x);
    });
});
<!----------------------------PARTE (AQUI)---------------------------------------------------->
 var fieldHTML2 = '<div id="destino2"><label>Operador: </label><select name="operario[]" style="width:500px" required class="campos selector"><option value="">Seleccione:</option><?php if (($_SESSION['tipo']=="admin")||($quien=="Facturacion")||($quien=="Operativo")){$query2 = $mysqli -> query ("SELECT CONCAT(primer_nombre, ' ',primer_apellido, ' ', segundo_apellido) AS trabajador, municipio AS municp FROM datos_archivo WHERE estadotrabajador='ACTIVO' AND cargo IN ('OPERARIO LIMPIEZA','OPERADOR DE BARRIDO/ESCOBITA','OPERADOR SANEAMIENTO BASICO','SUPERVISOR DE RUTAS','OPERADOR SANEAMIENTO BASICO Y BARRIDO') ORDER BY nombre ASC");}else{$query2 = $mysqli -> query ("SELECT CONCAT(primer_nombre, ' ',primer_apellido, ' ', segundo_apellido) AS trabajador, municipio AS municp FROM datos_archivo WHERE estadotrabajador='ACTIVO' AND cargo IN ('OPERARIO LIMPIEZA','OPERADOR DE BARRIDO/ESCOBITA','OPERADOR SANEAMIENTO BASICO','SUPERVISOR DE RUTAS','OPERADOR SANEAMIENTO BASICO Y BARRIDO') AND municipio='$municcc' ORDER BY nombre ASC");}$mysqli->set_charset("utf8");while ($valores2 = mysqli_fetch_array($query2)) { echo '<option value="'.strtoupper($valores2[trabajador]).'">'.strtoupper($valores2[trabajador]).'</option>';}?></select> <?php /*?><label>Apoyo: </label><select name="apoyo[]" id="apoyo" class="campos"><option value="">No</option><option value="Operador de Apoyo a la Recoleccion">Apoyo</option><option value="Operador Foraneo">Foraneo</option>  </select><?php */?> <label>Hora Inicio: </label><input name="hora1_operario[]" type="text" class="hora1 inputs2" autocomplete="off" size="1"/><label> Hora Final: <input name="hora2_operario[]" type="text" class="hora2 inputs2" autocomplete="off" size="1" /></label> <?php /*?>H.E: <input name="he[]" type="checkbox" value="si"/></label><?php */?> Novedad de Operario: <textarea name="novedad_operario[]" cols="30" id="novedadoperario"></textarea> <a href="javascript:void(0);" class="remove_button" title="Borrar Operario de Saneamiento"><img src="remove-icon.png" width="20" height="20"/></a></div>'; //New input field html
  </script>

ahora bien como notan existen unos campos (dentro de fieldHTML2) con la clase (class="campos selector") para tomar la opcion select2 y otra para la funcion campos que llama a la funcion siguiente

<script>
$(document).ready(function(){
    $('.inputs2').keyup(function(){
        if($('.inputs2').val().length==$('.inputs2').attr("maxlength")){
            var ih = $('.inputs2').index('.inputs2');
            $('.inputs2').eq(ih+1).focus();
        }
    });
});
</script>

pero esta función que hace que se pase el cursor entre estos campos (hora1 y hora2 operario) en automático pero solo funciona en los campos padres No en los creados... como hago para incluir esa función para que igualmente sea invocada (así como lo hace con select2 que funciona sin problema.)

1 respuesta 1

1

Para que la función de cambio de foco entre los campos hora1 y hora2 funcione también en los campos generados dinámicamente, puedes aprovechar el uso de $(document).on('keyup', '.inputs2', function() {...}) en lugar de $('.inputs2').keyup(...). Permite asignar la función a elementos actuales y futuros con la clase .inputs2.

<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var x = 1; //Initial field counter is 1
        
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Add field html.
            }
        });

        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });
    
    $(document).ready(function(){
        var maxField2 = 10;
        var addButton2 = $('.add_button2');
        var wrapper2 = $('.field_wrapper2');
        var x = 1;

        $(addButton2).click(function(){ 
            if(x < maxField2){
                x++;
                $(wrapper2).append(fieldHTML2); 
                /// Aplicar select2 a los nuevos elementos creados
                $('.selector').select2();
                console.log(x);
            }
        });

        $(wrapper2).on('click', '.remove_button', function(e){ 
            e.preventDefault();
            $(this).parent('div').remove(); 
            x--;
            console.log(x);
        });
    });

    // Usar delegación de eventos para que funcione también en los campos dinámicos
    $(document).on('keyup', '.inputs2', function(){
        if($(this).val().length === $(this).attr("maxlength")){
            var ih = $('.inputs2').index(this);
            $('.inputs2').eq(ih + 1).focus();
        }
    });
</script>
1
  • me sigue sin funcionar, intente ponerle lo que me dices, pero eliminó poner el formato de las horas a los campos (00:00)
    – Eduardo
    Commented el 12 nov. a las 13:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.