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");
}
}
});
});