Eventos en jQuery: La delegación de eventos

En el post anterior sobre administración de eventos avanzados, comenté que el método on() tiene un segundo argumento que es un selector. Este argumento puede ser cualquier selector de jQuery valido como podría ser un ID, clase, elemento… Para hacer un poco de memoria, el.on() funcionaba de la siguiente manera.

$('selector').on('evento', selector, datos, función);

1	$('selector').on('evento', selector, datos, función);

Si no se pasa el selector, el evento se aplica al selector inicial como podría pasar en el siguiente ejemplo

$('li').on('click', function() {
    $(this).css('color', 'red');
});

$('li').on('click', function() {

$(this).css('color', 'red');

});

Este código lo que haría sería cambiar el color del texto de los <li> que clique el usuario. El $(this) hace referencia al elemento que maneja el evento que sería el <li> que se clique.

Sin embargo, el problema de adjuntar eventos de esta manera sólo funciona si el elemento ya existe en la página. En caso de crear dinámicamente elementos HTML, estos no se verían afectados.

Delegar eventos

Para solucionar el problema mencionado, se puede aplicar el evento al elemento padre (el más alto en la cadena) y que los eventos escuchen en los elementos hijo. Con ello, el evento se aplica a un elemento ya existente por tanto, al añadir nuevos hijos no interfiere en el proceso. Obviamente es importante que cuando delegues el evento, el elemento padre ya esté creado, es decir, que esté cargado con la página y no surja de una creación HTML dinámica.

Podemos hacer la prueba con una lista de la compra. Se incluirá un input para añadir los elementos al ul, de esta manera se crearían dinámicamente pero, al delegar eventos no debería haber problema cuando interactuemos con ellos.

El HTML será el siguiente

<input type="text" size="50" id="producto" /> <button id="agregar">Añadir</button>
<h3>Mi lista de la compra</h3>
<hr />
<ul id="listaCompra">
</ul>

<input type="text" size="50" id="producto" /> <button id="agregar">Añadir</button>

<h3>Mi lista de la compra</h3>

<hr />

</ul>

Justo debajo estará el código jQuery (recuerda haber llamado a la librería en el <head>)

<script>
	$('#agregar').click(function(){
		var producto = $('#producto').val();
		$('#listaCompra').append('<li>'+producto+'</li>');
	});
	
	
	$('#listaCompra').on('click', 'li', function() { 
		  $(this).css('color', 'red'); 
	});
</script>

$('#agregar').click(function(){

var producto = $('#producto').val();

$('#listaCompra').append('<li>'+producto+'</li>');

});

$('#listaCompra').on('click', 'li', function() {

$(this).css('color', 'red');

});

</script>

El código se divide en 2 partes. Por un lado está el caso de pulsar el botón añadir. Al hacerlo cogemos el valor que esté en el input y lo pasamos a lista de la compra. Para ello contamos con append() que permite agregar HTML justo después del elemento hijo asique sólo hay que asegurarse de que el valor esté entre 2 <li>. Por el otro lado, estaría la delegación de eventos en el cual indicamos que si damos click alguno de los <li> de la lista de compra, el qué cliquemos pasará a tener color rojo.

delegación de eventos jquery - resultado

Resultado final de la lista de la compra

Para comprobar el éxito de la delegación de eventos, puedes comentar el .on() e introducir el siguiente código

$('li').on('click', function() { 
   $(this).css('color', 'red'); 
});

$('li').on('click', function() {

$(this).css('color', 'red');

});

Comprobarás que cuando cliques en un <li>, este no hará nada ya que fue creado a posteriori de haber cargado la página.

Y hasta aquí la delegación de eventos, espero que os haya resultado de ayuda. A seguir picando 🙂