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.
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);
body
porque digamos que es el elemento padre, pero podría ser un div
.click
, keyup
, etcétera.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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.