Evento único em jQuery

Quando estudamos a desvinculação de eventos com o método off, usamos a seguinte construção:

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

Primeiro, anexamos a função de retorno de chamada (handler) com on, e depois desvinculamos com off.

jQuery tem um método conveniente one, que permite vincular um evento único - ele será executado apenas uma vez, e depois será automaticamente desvinculado. Este método aceita como primeiro parâmetro o tipo de evento, e como segundo - a função a ser vinculada.

O próximo exemplo será baseado no seguinte código HTML:

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

O código CSS fica assim:

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

Agora vinculamos um evento único a cada li:

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

Clique nos itens da lista. Como você pode ver, obtivemos o mesmo efeito, graças ao método one.

Vincule a todos os links um evento - ao passar o mouse sobre o link, no final de seu texto deve ser adicionado seu href entre parênteses. Após a primeira passada do mouse sobre o link, o evento que adiciona o href ao final do texto deve ser desvinculado.

Para todos os inputs, faça com que eles exibam seu próprio value quando qualquer um deles for clicado, mas apenas no primeiro clique. Um segundo clique no input não deve causar nenhuma reação.

Dados parágrafos com números. Ao clicar em um parágrafo, deve aparecer nele o quadrado do número que ele contém, mas apenas no primeiro clique. No duplo clique no parágrafo, o número no parágrafo deve dobrar, mas também apenas na primeira vez.

Dados parágrafos. Faça com que no primeiro clique em um parágrafo, seja adicionado um '!' ao seu final, mas apenas no primeiro clique.