Evento único en jQuery
Cuando estudiamos el desvinculamiento de eventos con
el método
off,
usamos la siguiente construcción:
$('li').on('click', function() {
$(this).append('!');
$(this).off('click', func);
});
Primero adjuntamos la función manejadora con
on,
luego la desvinculamos con off.
En jQuery existe un método conveniente
one,
que permite vincular un evento único -
se ejecutará solo una vez, y
luego se desvinculará automáticamente. Este método
acepta el tipo de evento como primer parámetro,
y la función a vincular como segundo.
El siguiente ejemplo lo veremos basado en el código HTML a continuación:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
El código CSS se ve así:
li {
width: 100px;
cursor: pointer;
}
Ahora vinculamos un evento único a cada li:
$('li').one('click', function() {
$(this).append('!');
});
Haga clic en los elementos de la
lista. Como puede ver, obtuvimos el mismo efecto, gracias
al método one.
Vincule un evento a todos los enlaces -
al
pasar el cursor sobre el enlace, al final de su texto
se debe agregar su href entre
paréntesis. Después de la primera vez que se pase el cursor sobre el enlace
se debe desvincular de él el evento que
agrega el href al final del texto.
Para todos los inputs, hágalos para que
muestren su value al
presionar sobre cualquiera de ellos, pero solo en la
primera pulsación. Una segunda pulsación en el
input no debe provocar ninguna reacción.
Se dan párrafos con números. Al hacer clic en un párrafo, en él debe aparecer el cuadrado del número que contiene, pero solo en el primer clic. Al hacer doble clic en el párrafo, el número en el párrafo debe duplicarse, pero también solo la primera vez.
Se dan párrafos. Hágalo para que en el primer
clic en un párrafo se le agregue al final un '!',
pero solo en el primer clic.
