Agregar eventos sin que exista el elemento en el DOM con jQuery

En la entrada anterior (Una sencilla llamada AJAX) teníamos un enlace con un id=»baja» en el que cuando hacíamos click ejecutabamos nuestra llamada AJAX. Si en vez de crear un Id hubieramos creado una clase, cualquier elemento de la página con esta clase tendría la funcionalidad dada.

Esta forma es válida si tenemos un elemento al que asociar el evento en el momento en el que se carga la página, pero… ¿Qué pasa si el elemento se crea dinámicamente después de haber cargado la página?, por ejemplo, tenemos un formulario que al rellenarlo nos debe de crear un div con el texto introducido en el mismo y un enlace a borrar que evidentemente debe funcionar. Al ser un elemento nuevo, aunque le pongamos nuestra clase, no funcionaría.

Para dar solución a esta situación, en la versión 1.4 de jQuery se introdujo la función live():

Sin embargo, desde la versión 1.7 de jQuery, esta función ha quedado obsoleta o como les gusta decir a ellos «deprecated».  En su lugar se usa on() que tiene un funcionamiento muy similar sino igual.

Es importante conocer ambos métodos porque no es la primera vez (y seguro que ni la última) que me encuentro con que manteniendo una web, esta usa una librería antigua de jQuery y hay que adaptarse. Además, a diferencia de live, on nos permite asociar varios eventos en una misma llamada:

Con esto definimos de una tacada los eventos de cualquier elemento con la clase borrar.

Si te ha resultado útil, ¡Compartelo!Share on linkedin
Linkedin
Share on twitter
Twitter
Share on google
Google
Share on facebook
Facebook
Share on reddit
Reddit
Share on email
Email

Comments are closed.