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:

  • 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:

Y la función es:

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

Deja un comentario

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