jQuery

jQuery – Seleccionar elementos creados dinámicamente

Resumen: mostrar cómo seleccionar (con un selector de jQuery) elementos que son creados o dibujados de manera dinámica con jQuery.

Como sabemos, podemos seleccionar elementos que ya existen, usando un selector como cuando usamos querySelector. Por ejemplo:

$(".producto")

O también:

$("#nombreUsuario")

El problema viene cuando dibujamos los datos de manera dinámica (por ejemplo usando AJAX) y debemos agregar un listener dinámico.

Selector dinámico con jQuery

Para seleccionar elementos creados en tiempo de ejecución o de manera dinámica debemos colocar a los mismos dentro de un contenedor (también funciona con el body). La sintaxis es:

const $contenedor = $("body");
$contenedor.on("evento", "selector", función);
  • En donde el contenedor debe ser algo que dentro del mismo tenga a los elementos dinámicos; en este caso coloqué el body porque digamos que es el elemento padre, pero podría ser un div.
  • El evento puede ser click, keyup, etcétera.
  • Por otro lado, el selector es el selector, algo como .producto por ejemplo
  • La función es la que se invoca al desencadenar el evento

Ejemplo de evento dinámico con jQuery

Tengo una lista de películas que se dibuja con jQuery, y tengo un botón para alquilarlas con la clase producto. Así que hago esto:

let $contenedorPeliculas = $("body");
$contenedorPeliculas.on("click", ".producto", funcionComprar);

Y la función es:

let funcionComprar = function (e) {
    pelicula = $(this).data("pelicula");
    refrescarConPelicula();
    $("#modalCompra").modal();
    e.stopPropagation();
}

Así, aunque dibuje los elementos de manera dinámica, el listener funciona.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

17 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.