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():
1 2 3 4 5 6 |
$(function(){ $('a.borrar').live('click',function(event){ event.preventDefault(); alert('Adiós mundo cruel!'); }); }); |
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.
1 2 3 4 5 6 |
$(function(){ $('a.borrar').on('click',function(event){ event.preventDefault(); alert('Adiós mundo cruel!'); }); }); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ $('.borrar').on({ click: function(){ alert('Adiós mundo cruel!'); }, mouseenter: function(){ // Ponemos las letras de color rojo chillón jQuery(this).css('color','#f00'); }, mouseleave: function(){ // Ponemos las letras de color negro jQuery(this).css('color','#000'); } }); }); |
Con esto definimos de una tacada los eventos de cualquier elemento con la clase borrar.
Comments are closed.