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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *