Vamos a empezar este blog con JQuery. Muchos dirán que jquery es anticuado, que jquery ya no se usa…(bla, bla, bla), pero si miráis las ofertas de empleo por internet, es uno de los frameworks que más se piden y por tanto es recomendable conocerlo. En esta entrada aprenderemos a crear elementos con JQuery y asignarles elementos ya creados.
Eventos en elementos creados con JQuery| on()
Tenemos el siguiente html, donde tenemos simplemente un botón con la clase .btn y queremos que al hacer click, nos cree otro botón igual, y que todos los botones creados, tengan el mismo comportamiento, o sea, crear más botones, así de fácil.
Por tanto, si conocemos un poco de JQuery, lo primero que se nos ocurriría sería hacer lo siguiente:
Si lo ejecutamos nos damos cuenta que efectivamente, me crea los botones al hacer click, pero el evento on("click"), solo permanece asignado al primer botón. Para resolver este problema y como se está poniendo muy de moda ahora, vamos a jugar con el elemento button.btn y con su elemento padre, o sea div#contenido.
Función on()
La función on() nos permite asignarle eventos a los hijos de un elemento padre. Por ejemplo, en este caso lo que haremos será asignarle el evento on("click") a los hijos de div#contenido que sean button.btn. De esta manera, cuando lancemos el evento on("click"), y se cree un boton nuevo, se le asignará ese evento a todos los elementos que cumplan con la condición anterior, y como el boton creado es un button.btn, y su padre es div#contenido, este elemento creado también tendrá asignado el evento.
Para finalizar, daros cuenta que al clonar, hemos usado button.btn:last , ya que solo queremos que nos clone un boton, en este caso el último (también podríamos haber codigo el primero button.btn:first ). Como experimento, prueba a ejecutar el código pero sin last, para que veas lo que te hace.
Y hemos llegado al final, esta función es muy útil cuando creamos elementos con jquery, pero que tengan asignados eventos sin la necesidad de recargar el DOM.
Como siempre digo, no existe una única solución para los problemas y menos en el mundo de la programación. ¿que te ha parecido? ¿te ha sido útil? ¿cómo lo habrías hecho tú?
Os dejo con un vídeo explicativo de lo que hemos abordado en esta entrada.
Recomendaciones
Os recomiendo visitar la documentación oficial de jquery, en especial de la función on() que puede hacer muchísimas mas cosas.
Documentación JQuery: https://jquery.com/
Función on(): http://api.jquery.com/on/
CÓDIGO COMPLETO
Comparto el código completo, aunque es mejor que lo hagas tu mismo.
El código compartido son capturas de pantalla. El secreto no está en copiar y pegar código, sino en entenderlo.
