0

tengo varios input a modo de formulario con su respectivo label, tengo una funcion que al hacer foco en el input o perderlo, se añade una clase al label para que tome una pequeña animacion y cambie de tamaño. Funciona todo correcto, excepto con los input que se generan de forma dinamica con ajax.

Las funciones listado_comunas y listado_regiones, generan un select segun una consulta a una base de datos, por lo que es con estos elementos dinamicos que no logro ejecutar la funcion.

Adjunto el formulario como esta implementado y la funcion en jquery.

<div class="row justify-content-center formularios-sesion">
    <div class="col-lg-12 col-md-9 col-sm-10 col-12 p-3 form-sesion" id="form-cuenta">
        <a href="<?php echo $raiz;?>"><img src="<?php echo $raiz;?>imagenes/logo-blanco.png" alt=""></a>
        <h2 class="linea"><span>CREAR CUENTA</span></h2>
        <div class="form-row">
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="nombre">NOMBRE<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="nombre" id="nombre" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="apellido">APELLIDO<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="apellido" id="apellido" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>      
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="rut">RUT<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="rut" id="rut" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>      
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="telefono">TÉLEFONO<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="telefono" id="telefono" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>                                                                          
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2">
                <label for="direccion">DIRECCIÓN<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="direccion" id="direccion" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>  
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2 input_region">
                <label for="nombre">APELLIDO<i class="icon-dot-single text-danger"></i></label>
            </div>
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2 input_comuna"></div>
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2">
                <label for="correo">CORREO<i class="icon-dot-single text-danger"></i></label>
                <input type="email" class="form-control form-control-log" name="correo" id="correo" style="text-transform:lowercase;" onkeyup="javascript:this.value=this.value.toLowerCase();">
            </div>  
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="registrar_clave">CONTRASEÑA<i class="icon-dot-single text-danger"></i></label>
                <input type="password" class="form-control form-control-log" name="registrar_clave" id="registrar_clave">       
                <i class="icon-eye mostrar-clave ver-clave"></i>                            
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="repetir_clave">REPETIR CONTRASEÑA<i class="icon-dot-single text-danger"></i></label>
                <input type="password" class="form-control form-control-log" name="repetir_clave" id="repetir_clave">   
                <i class="icon-eye mostrar-clave ver-repetir-clave"></i>                                        
            </div>  
            <div class="col-12"></div>
            <div class="col-sm-6 mt-3">
                <button class="btn btn-success w-100 mt-2" id="registrar-usuario">Registrar</button>
            </div>                                                          
        </div>                                  
        <p class="pt-2 text-white mensaje_nuevo_usuario" style="-webkit-user-select:text;-moz-user-select:-moz-text; -ms-user-select:text;user-select:text"></p>                        
    </div>
</div>  

Funcion en Jquery

$(document).ready(function () {
        listado_regiones();
        listado_comunas();  
        
        $(".formularios-sesion").find("input, textarea, select").on("blur focus", function (e) {
            var $this = $(this), label = $this.prev("label");           
            if (e.type === "focus") {   
                label.addClass("active");               
            }else if (e.type === "blur") {
                if($this.val() === "") {
                    label.removeClass("active");
                }else{
                    label.addClass("active");
                }
            }
        });         
    }); 

1 respuesta 1

0

Lo que puede estar sucediendo es que la respuesta de estos elementos dinámicos se tarde un poco y al terminar de ser añadidos al DOM, el .find ya ha sido ejecutado, por lo cual, cuando se ejecutó el find estos select no existían en el DOM.

mueve la ejecución del find al done del ajax para que tengas certeza de que existen estos elementos en el DOM

var jqxhr = $.ajax( "example.php" )
  .done(function() {
    $(".formularios-sesion").find("input, textarea, select").on("blur focus", function (e) {
            var $this = $(this), label = $this.prev("label");           
            if (e.type === "focus") {   
                label.addClass("active");               
            }else if (e.type === "blur") {
                if($this.val() === "") {
                    label.removeClass("active");
                }else{
                    label.addClass("active");
                }
            }
        });   
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

Tu Respuesta

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

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