Delegación en jQuery

Si has estudiado JavaScript, ya te has encontrado con el tema de la delegación de eventos, con la cual se puede, por ejemplo, eliminar problemas al asignar eventos para nuevos elementos. Veamos cómo se vería esto en jQuery.

Tomemos el siguiente código HTML:

<ul>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
</ul>

El CSS para él se ve así:

li {
	width: 100px;
	cursor: pointer;
}

Ahora, usando el método on, vinculemos el método click no al elemento de lista li, como hacíamos en lecciones anteriores, sino a la lista misma ul. También pasaremos un segundo parámetro (opcional) 'li' como selector de descendientes. Veamos qué obtuvimos:

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

Dado un ul, con varios li dentro. Debajo del ul haz un botón, al presionar cual al final del ul se agregará un nuevo li con el texto 'punto'. Haz que al hacer clic en cada li, se le agregue al final un '!'. Esto debe funcionar también para los li recién agregados. Resuelve la tarea usando delegación (es decir, el evento debe ser asignado al ul).

Dada una tabla de usuarios con dos columnas: nombre y apellido. Debajo de la tabla haz un formulario, con el cual se pueda agregar un nuevo usuario a la tabla. Haz que al hacer clic en cualquier celda aparezca un prompt, con el cual se pueda cambiar el texto de la celda. Resuelve la tarea usando delegación (es decir, el evento debe ser asignado a la table).