Delegação em jQuery

Se você estudou JavaScript, então você já encontrou o tópico delegação de eventos, com o qual é possível, por exemplo, se livrar de problemas ao atribuir eventos para novos elementos. Vamos ver como isso ficará no jQuery.

Vamos pegar o seguinte código HTML:

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

O CSS para ele fica assim:

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

Vamos agora, usando o método on, vincular o método click não ao item da lista li, como fizemos nas lições anteriores, mas à própria lista ul. Também vamos passar um segundo parâmetro (opcional) 'li' como seletor de descendentes. Vamos ver o que conseguimos:

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

Dado um ul, com vários li dentro. Abaixo do ul, faça um botão, ao clicar no qual um novo li será adicionado ao final do ul com o texto 'item'. Faça com que ao clicar em cada li, um '!' seja adicionado ao seu final. Isso deve funcionar também para os li recém-adicionados. Resolva a tarefa usando delegação (ou seja, o evento deve ser atribuído ao ul).

Dada uma tabela de usuários com duas colunas: nome e sobrenome. Abaixo da tabela, faça um formulário com o qual seja possível adicionar um novo usuário à tabela. Faça com que ao clicar em qualquer célula, apareça um prompt, com o qual seja possível alterar o texto da célula. Resolva a tarefa usando delegação (ou seja, o evento deve ser atribuído à table).